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

Question

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

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

我的问题是如何在 MainFormComponent 中访问 mySubFormComponent 中输入的“formControlGroup”对象（可能在子组件中发送此对象，但对于子窗体上的哪个事件，需要进行验证）我做错了什么？

简单示例：

主组件

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

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