Question

对于这个场景，我还看到了许多其他与类似场景有关的问题，但并不是我一直在寻找的问题。

我在我的打字稿文件中创建了一个表单组，其中包含一堆表单控件（id，firstName，lastName，email等）。有些控件具有Validators.required设置，有些则没有。

我遇到了这种情况（我确信这是相当普遍的），我只希望在该组中的一个特定表单控件被设置为仅在该组中其他控件之一具有值（另一个不需要控制。）

处理此问题的最佳做法是什么？

例如，让我说我有以下方法来设置表单组...

private initFormClient(): FormGroup {
    let clientGroup = this.fb.group({
        id: [client.id], //hidden
        firstName: [client.firstName, Validators.required],
        lastName: [client.lastName, Validators.required],
        email: [client.email, Validators.required]),
        phone: [client.phone],
        birthday: [moment(client.birthday).format('YYYY-MM-DD'), Validators.required],
        enrollmentDate: [moment(this.workingEnrollment.enrollmentDate).format('YYYY-MM-DD'), Validators.required],
        dischargeDate: [this.workingEnrollment.dischargeDate ?moment(this.workingEnrollment.dischargeDate).format('YYYY-MM-DD') : undefined],
        treatmentLevelDate: [this.workingEnrollment.treatmentLevelDate ? moment(this.workingEnrollment.treatmentLevelDate).format('YYYY-MM-DD') : undefined],
        treatmentLevelId: 
        profileImageUri: [client.profileImageUri],
        profileImageFile: [''],
    });
    return clientGroup;
}

仅当treatmentLevelId具有值（由用户选择）时，我才想根据需要设置treatmentLevelDate控件。除非有必要，否则我不想在该组中添加全局验证器。如果可能的话，我宁愿只是学习如何为单个控件设置自定义验证器。谢谢您的帮助！

Answer 1

您可以尝试使用setValidators()函数动态设置验证器：

ngOnInit() {
  this.form = this.initFormClient();

  this.form.get('firstName').valueChanges.subscribe(val => {
    if ((val || '').split(' ').filter(Boolean).length > 1) {
      this.form.get('lastName').clearValidators();
    }
    else {
      this.form.get('lastName').setValidators(Validators.required);      
    }
    this.form.get('lastName').updateValueAndValidity();
  });
}

在此示例中，仅当名字字段包含少于2个单词时，才需要 Last Name 字段。如果名字字段包含多个单词，则不需要姓氏字段。

STACKBLITZ

仅当该表单组中的另一个特定表单控件具有值

1 个答案: