如何在反应形式FormArray上设置验证器?

时间:2018-06-19 18:05:57

标签: angular typescript angular-reactive-forms

我有这样的表格:

export class CreateOrUpdatePage implements OnInit {
  createOrUpdateForm: FormGroup;

  constructor(private formBuilder: FormBuilder
    , private modalCtrl: ModalController) { 

      this.createOrUpdateForm = this.formBuilder.group({
          name: ['', [Validators.required]],
          //how to set it here
          emails: this.formBuilder.array([this.formBuilder.group({ email:'' })])
      });
  }

  ngOnInit() {
    //this doesn't work...
    this.createOrUpdateForm.controls.emails.setValidators(Validators.required);
  }

  get f() { return this.createOrUpdateForm.controls; }
  get emails() {
    return this.createOrUpdateForm.get('emails') as FormArray;
  }

  async onSubmit() { 
    // stop here if form is invalid
    if (this.createOrUpdateForm.invalid) {
        return;
    }
  }
}

在视图中,我有一个基于有效表单而启用或禁用的按钮,如下所示:

  <ion-button (click)="onSubmit()" [disabled]="!createOrUpdateForm.valid || isLoading">
      <ion-icon name="checkbox" slot="icon-only"></ion-icon>
  </ion-button>

仅当我在名称字段中未输入任何内容时,此按钮才禁用。但是,我希望按钮被禁用,即使使用Angular验证程序的电子邮件中没有任何值也是如此。我可以使用一些自定义逻辑来做到这一点,但我想使用内置的验证器来实现。有可能吗?

0 个答案:

没有答案