子コンポーネントに複数のformControlを持つControlValueAccessor

Question

子コンポーネントに複数のformcontrolがあり、子コンポーネントにバリデータを適用する方法は、元のフォームが無効になるようにします。 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

質問が否決された理由を私は知らないが、私はだから私は答えを投稿しています他に役立つかもしれないと感じ。 は私が正常値まず

@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

を結合することができた子供のformgroupをバインドするために、複数の試行の後、これは私をたくさん助けたが、その後、私たちは物事を過度に複雑していること、が分かりました。独自のformControlを構築する必要はなく、formGroupを子コンポーネントに渡すことができます。

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

}); 

我々はFormGroup

@Input() 
usernameGroup: FormGroup; 

の入力プロパティを必要とする子コンポーネントで：親コンポーネントで 、代わりの

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

}); 

は我々ではなく、コントロールのFormGroupとしてユーザー名を初期化します

子テンプレートの場合：

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

、その後、親テンプレートで：MOR情報について

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

、この記事をチェックアウト：https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2

本当にここ行き過ぎを独自formControlイストの構築、その詳細inforamtionのために、顔をしていますここに：http://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html