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

Question

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

我认为这是使用注释 @Input() 将我的父对象 "formControlGroup" 对象传输到子组件的问题，这发生在创建子组件对象之后（在视图中Lavel？）并在子组件中覆盖我定义的（子窗体）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>

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],
});

要使子组件兼容，您需要使其实现自定义值访问器，并且link子表单状态使用此访问器。

有关详细信息，您可以查看这些 link：

http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/（节 "NgModel-compatible component"）

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

Angular2. How to use sub-form component

angular2-forms

angular2-template

angular