Angular2。如何使用子表单组件

Question

我想定义MySubFormComponent在其他组件中使用很多时间（如部分表单元素）我尝试这样做，但有访问主窗体中的“formControlGroup”对象（subForm）的问题零件。

我的事情，这是与发射问题我的父母“formControlGroup”对象子组件使用注释@input（）这happend后创建子组件的对象（查看Lavel？），并覆盖我的定义（子窗体）ControlGroup在子组件中。

我的问题是我怎样才能访问输入的“formControlGroup”对象到MainFormComponent中的mySubFormComponent（也许emmit这个对象在子组件中，但在subForm的哪个事件，需要工作验证）我做错了什么？

简单的例子：

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兼容设备”）