当前位置:  开发笔记 > 编程语言 > 正文

表单提供程序ngForm

如何解决《表单提供程序ngForm》经验,为你挑选了1个好方法。

我有以下问题.我想使用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: `
        
` }) export class FormTest1 { public input = { test: "" } }

但是,这不是:

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


@Component({
    directives: [FORM_DIRECTIVES],
    template: `
        
    `
})
export class FormInput {
    @Input() data;
}

@Component({
    directives: [FormInput, FORM_DIRECTIVES],
    template: `
        
` }) export class FormTest1 { public input = { test: "" } }

因此抛出:

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

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



1> Langley..:

这是一个小例子:

外形test.component.js

    @Component({
    selector: 'form-test',
    directives: [FormInput, FORM_DIRECTIVES],
    template: `
        

Is Form Valid? - {{heroForm.valid}}

Data: - {{input | json}}
` }) 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: `
        
        
    `
})
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/

推荐阅读
360691894_8a5c48
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有