Angular 2。如何使用子表单组件

Question

我想定义 MySubFormComponent 以便在其他组件(如部分表单元素)中多次使用，我尝试这样做但在从子组件访问主组件中的“formControlGroup”对象(子表单)时遇到问题。

我认为这是使用注释 @Input() 将我的父“formControlGroup”对象传输到子组件的问题，这发生在创建子组件对象(在 View Lavel 中？)并覆盖我的定义之后(subForm) 子组件中的 ControlGroup。

我的问题是如何访问输入的“formControlGroup”对象到 MainFormComponent 中的 mySubFormComponent(也许在子组件中发出这个对象，但对于子窗体上的哪个事件，需要进行验证)我做错了什么？

简单示例:

主要组件

@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);
      }
}

主模板:

<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>

主窗体组件

@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 兼容组件”部分)