Angular 6 FormArray 丢弃空字段

Question

我正在使用 Angular 6。我有一个 FormArray 数组，如下所示

contactAddForm: FormGroup;
phone_numbers: FormArray;

ngOnInit() {

  this.contactAddForm = this.formBuilder.group({
    first_name: new FormControl('', [
      Validators.required
    ])
    phone_numbers: this.formBuilder.array([this.createPhoneNumberFormField()])
  });
}

createPhoneNumberFormField(): FormGroup {
  return this.formBuilder.group({
    phone: new FormControl(),
    primary: new FormControl()
  });
}

此处 phone 是 text 字段，而 primary 是 checkbox 发送 true 或false.

但有时会动态添加更多字段，如果提交为空，分配给 phone 和 primary 字段的值为 null.

如何从提交中丢弃 null phone 字段的 formArray 字段？
如何设置 primary 默认为 false 而不是 null?

Answer 1

您可以将默认值设置为 FormControl 对象，方法是将其作为构造函数的第一个参数提供。

createPhoneNumberFormField(): FormGroup {
  return this.formBuilder.group({
    phone: new FormControl(),
    primary: new FormControl(false) // asigning default as false
  });
}

如果您想在提交前删除 null 字段，则必须循环 form controls 并手动删除它们。

Angular 6 FormArray 丢弃空字段

Angular 6 FormArray discard null fields

angular6

angular-formbuilder