角度2。サブフォームコンポーネントの使い方

Question

私は他のコンポーネント（部分フォーム要素など）で何度も使用するMySubFormComponentを定義したいと思いますが、これをやってみましたが、子コンポーネントからの "formControlGroup"オブジェクト（サブフォーム）へのアクセスに問題があります。成分。これは注釈@Inputを（使用して、子コンポーネントに私の親「formControlGroup」オブジェクトを送信すると問題がある

Iの事）この起こった後に（？ビューLavelで）子コンポーネントのオブジェクトを作成し、私の定義（サブフォーム）ControlGroupを上書き子コンポーネント内にあります。

私の質問は、MainFormComponentのmySubFormComponentに入力された "formControlGroup"オブジェクトにアクセスするにはどうすればよいですか（このコンポーネントを子コンポーネントでエミットすることはできますが、サブフォーム上のイベントはバリデーションを行う必要があります）

簡単な例：

MainComponent

@Component({ 
     selector: selector, 
     templateUrl: tmplUrl, 
     directives: [ FORM_DIRECTIVES ] 
}) 
export class MainFormComponent { 

    public mainForm: ControlGroup; 
    public recipientForm: ControlGroup; 
    public recipientData: RecipientModel; //testing variable for use ngModel 

    constructor(private fb: FormBuilder, public cdr: ChangeDetectorRef) { 

     this.recipientData = new RecipientModel(); //testing instance variable 
     this.recipientForm = new ControlGroup({});  
     this.mainForm = this.fb.group({ 
      'user_name': ['Test User', Validators.required], 
     }); 
    } 

    onSubmit(): void { 
     console.log('Submitted value:', this.mainForm.value); 
     console.log('Recipient data:', this.recipientForm.value); 
     } 
} 

MainTemplate：

<form [ngFormModel]="mainForm" class="form-inline" (ngSubmit)="onSubmit()"> 
    <div class="form-group"> 
    <label>User name:</label> 
    <input type="text" class="form-control" 
     [ngFormControl]="mainForm.controls['user_name']"/> 
    </div> 
    <form-recipient [subFormData]="recipientData" 
     [subForm]="recipientForm"></form-recipient> 
</form> 

MainFormComponent

@Component({ 
    selector: selector, 
    templateUrl: tmplUrl, 
    directives: [ FORM_DIRECTIVES ] 
}) 
export class FormRecipientComponent { 

    @Input() public subForm: ControlGroup; 
    @Input() public subFormData: RecipientModel; 

    constructor(private fb: FormBuilder,public cdr: ChangeDetectorRef) { 
     this.subForm = this.fb.group({ 
      'recipient_name': ['John Doe', Validators.required], 
      'recipient_name_ex': ['', Validators.required], 
      'recipient_address': ['Baker Street', Validators.required] 
     }); 
    } 


    ngAfterViewInit(){ 
     // this.cdr.detectChanges(); 
     console.log('RecipientSubForm', this.subForm.value); 
    } 

} 

export class RecipientModel { 
    public recipient_name: string; 
    public recipient_name_ex: string; 
    public recipient_address: string; 
} 

サブフォームテンプレート

<form [ngFormModel]="subForm" class="form-inline"> 
    <div>Validate: <span *ngIf="subForm.valid">OK</span></div> 
    <div class="form-group"> 
     <label>Recipient name:</label> 
     <input type="text" class="form-control" 
      [ngFormControl]="subForm.controls['recipient_name']" 
      /> 
    </div> 
    <div class="form-group"> 
     <label>Recipient cd..</label> 
     <input type="text" class="form-control" 
      [ngFormControl]="subForm.controls['recipient_name_ex']" 
      /> 
    </div> 
    <div class="form-group"> 
     <label>Recipient address:</label> 
     <input type="text" class="form-control" 
      [ngFormControl]="subForm.controls['recipient_address']" 
      /> 
    </div> 
</form> 

結果が提出マイ：

Recipient form: Object {} 

Answer 1

私は、サブフォームコンポーネントのngModel準拠のコンポーネントを作成します。この方法で、コントロールを使用してメインフォームに参加させることができます。ここで

サンプルです：メインフォームはこのように定義されるだろう

<form [ngFormModel]="mainForm" class="form-inline" 
         (ngSubmit)="onSubmit()"> 
    <div class="form-group"> 
    <label>Rachunek odbiorcy:</label> 
    <input md-input type="text" class="form-control" 
     [ngFormControl]="mainForm.controls['user_name']"/> 
    </div> 
    <form-recipient [subFormData]="recipientData" 
    [ngFormControl]="mainForm.controls['recipient']"></form-recipient> 
</form> 

あなたは：

this.mainForm = this.fb.group({ 
    'user_name': ['Test User', Validators.required], 
    'recipient': [{...}, validatorFct], 
}); 

サブコンポーネントが準拠させるために、あなたはそれがカスタム値アクセサを実装するために必要とサブフォームの状態をこのアクセサにリンクします。あなたはこれらのリンクを見てすることができます詳細については

：

• Angular 2 custom form input
• http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/（セクション "NgModel互換コンポーネント"）