首页 文章

表单提供程序ngForm

提问于
浏览
6

我有以下问题 . 我想使用NG2 Forms . 根据angular 2文档,使用表单上的ngForm指令和输入上的ngControl指令,表单应始终可以访问输入的有效性 .

如果输入与表单位于同一组件中,则此方法有效,但只要将输入移动到子指令中,它们就不再获取ngForm-Provider .

这有效:

import { Component, Input } from 'angular2/core';
import { FORM_DIRECTIVES } from 'angular/common';

@Component({
    directives: [FORM_DIRECTIVES],
    template: `
        <form #heroForm="ngForm">
            <input type="text"
                [(ngModel)]="input.test"
                ngControl="name">
        </form>
    `
})
export class FormTest1 {
    public input = {
        test: ""
    }
}

但是,这不是:

import { Component, Input } from 'angular2/core';
import { FORM_DIRECTIVES } from 'angular/common';


@Component({
    directives: [FORM_DIRECTIVES],
    template: `
        <input *ngIf="data"
            [(ngModel)]="data.test"
            ngControl="name">
    `
})
export class FormInput {
    @Input() data;
}

@Component({
    directives: [FormInput, FORM_DIRECTIVES],
    template: `
        <form #heroForm="ngForm">
            <form-input
                [data]="input">
            </form-input>
        </form>
    `
})
export class FormTest1 {
    public input = {
        test: ""
    }
}

因此抛出:

EXCEPTION: No provider for t! (t -> t) in [null]

只要从输入中删除ngControl属性,错误就会消失,但父级中的表单不再接收有关输入的任何信息 . 如何将ngForm传递给子组件?
提前致谢 .

1 回答

  • 5

    这是一个小例子:

    外形test.component.js

    @Component({
        selector: 'form-test',
        directives: [FormInput, FORM_DIRECTIVES],
        template: `
            <form [ngFormModel]="heroForm">
                <br>Is Form Valid? - {{heroForm.valid}}<br>
                <br>Data: - {{input | json}}<br>
                <input type="text" [(ngModel)]="input.test1" required [ngFormControl]="heroForm.controls['test1']">
                <form-input [hForm]="heroForm" [data]="input">
                </form-input>
                <button type="submit">Submit</button>
            </form>
        `
    })
    export class FormTest1 {
    
        public heroForm:ControlGroup;
    
        constructor(private _builder:FormBuilder){
            this.heroForm = _builder.group({
                test1: ["", Validators.required],
                test2: ["", Validators.required]
            });
        }
        public input = {
            test1: "",
            test2: ""
        }
    }
    

    形输入test.ts

    @Component({
        selector: 'form-input',
        directives: [FORM_DIRECTIVES,NgForm],
        template: `
            <label>sdsd</label>
            <input type="text" [(ngModel)]="data.test2" [ngFormControl]="hForm.controls['test2']" required>
        `
    })
    export class FormInput {
        @Input() hForm:ControlGroup;
        @Input() data;
    }
    

    我主要做了两件事:
    1-您只能访问父对象中不在子项中的表单,我添加了另一个输入,以便您可以传递它 .
    2 - 有两种方法可以创建一个ControlGroup,一种是隐式的,就像你用 ngFormngControl 做的那样,另一种方式就像我用 ngFormModelngFormControl 那样明显,第二种方式可以让你更好地控制表格,这样就可以了你这样的事情 .

    我建议你阅读这个链接:http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/

相关问题