ControlValueAccessor在子组件中有多个formControl

Question

我在子组件中有多个formcontrols，如何在子组件中应用验证器，以便原始表单将失效。使用ControlValueAccessor实现它将是理想的，但希望从简单的@input表单组开始。

@Component({ 
    selector: 'my-child', 
    template: ` 

    <h1>Child</h1> 
    <div [formGroup]="childForm"> 
    <input formControlName="firstName"> 
    <input formControlName="lastName"> 
    </div> 
    ` 
}) 

export class Child { 
    @Input() 
    childForm: FormGroup; 
} 

http://plnkr.co/edit/K1xAak4tlUKtZmOV1CAQ

Answer 1

我不知道为什么这个问题被下投了票，但我觉得它可能是有帮助的其他所以我张贴的答案。 绑定孩子的formgroup多次尝试后，我能够成功绑定值

@Component({ 
    selector: 'my-child', 
    template: ` 

    <h1>Child</h1> 
    <div [formGroup]="name"> 
    <input formControlName="firstName"> 
    <input formControlName="lastName"> 
    </div> 
    `, 
    providers: [ 
    {provide: NG_VALUE_ACCESSOR, useExisting: Child, multi: true} 
    ] 
}) 

export class Child implements ControlValueAccessor { 
    name: FormGroup; 
    constructor(fb: FormBuilder) { 
    this.name = fb.group({ 
     firstName:[''], 
     lastName: [''] 
    }); 
    } 

    writeValue(value: any) { 
    if(value) { 
     this.name.setValue(value); 
    } 
    } 

    registerOnChange(fn: (value: any) => void) { 
    this.name.valueChanges.subscribe(fn); 
    } 

    registerOnTouched() {} 
} 

http://plnkr.co/edit/ldhPf7LTFVtTFHe9zfAj?p=preview

Answer 2

起初，这对我帮助很大，但后来我发现，我们正在过于复杂的事情。我们不必构建自己的formControl，只需将formGroup传递给我们的子组件。 在父组件，而不是

this.form = fb.group({ 
    name:['Angular2 (Release Candidate!)'], 
    username: [{firstName: 'First', lastName: 'Last'}], 
    email:['My Email'] 

}); 

我们初始化用户名作为FormGroup，而不是控制：

this.form = fb.group({ 
    name:['Angular2 (Release Candidate!)'], 
    username: fb.group({ 
    firstName: ['First'], 
    lastName: ['Last'] 
}), 
    email:['My Email'] 

}); 

在我们需要输入属性为FormGroup

@Input() 
usernameGroup: FormGroup; 

子组件

在子模板中：

<div [formGroup]="usernameGroup"> 
    <input formControlName="firstName"> 
    <input formControlName="lastName"> 
</div> 

，然后在父模板：

<my-child [usernameGroup]="form.controls.username"></my-child> 

如需更多信息，请查看这篇文章：https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2

在这里建立一个自己的formControl IST真的矫枉过正，有关更多inforamtion，看看这里：http://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html