如何在 angular forms 中实现条件要求验证？

Question

如果两个字段都没有输入，那么两者都可以是可选的。 如果 firstname 已输入，则根据需要设置 lastname。 如果 lastname 有输入但 firstname 没有输入，则根据需要设置 firstname。

如果一个字段有值而另一个字段没有值，则根据需要设置其他字段。 谢谢你。

所以就像我是用户并且有两个字段，即名字和姓氏。 如果我在名字上输入数据但姓氏为空，则根据需要设置姓氏（反之亦然）。 任何想法？ 谢谢

HTML

<div fxLayout="row" fxLayoutGap="24px" formGroupName="person">
  <div fxFlex fxLayout="row">
    <mat-form-field appearance="outline" class="pr-4" fxFlex>
      <mat-label>Firsname</mat-label>
      <input matInput #firstname formControlName="firstname" trim  required/>
      <button type="button" mat-button   *ngIf="firstname.value"  matSuffix mat-icon-button aria-label="Clear"
      (click)="clearFieldFirstname()">
      <mat-icon>close</mat-icon>
    </button>
    </mat-form-field>
  </div>
  <div fxFlex fxLayout="row">
    <mat-form-field appearance="outline" class="pr-4" fxFlex>
      <mat-label>Lastname</mat-label>
      <input matInput #lastname formControlName="lastname" trim required/>
      <button type="button" mat-button   *ngIf="lastname.value"  matSuffix mat-icon-button aria-label="Clear"
      (click)="clearFieldLastname()">
      <mat-icon>close</mat-icon>
    </button>
    </mat-form-field>
  </div>
</div>

TS 代码

const personGroup = this.formBuilder.group({
  firstName: [person.firstName, Validators.required],
  lastName: [person.lastName, Validators.required],
});

const formGroup = this.formBuilder.group({
  person: personGroup,
});

this.person.get("firstname").valueChanges.subscribe(value => {
  const lastName = this.person.get("lastname");
  lastName.clearValidators();
  if (value && !lastName.value) {
    lastName.setValidators(Validators.required);
  }
  lastName.updateValueAndValidity({
    emitEvent: false
  });
});

this.person.get("lastname").valueChanges.subscribe(value => {
  const firstName = this.person.get("firstname");
  if (value && !firstName.value) {
    firstName.setValidators(Validators.required);
  } else {
    firstName.clearValidators();
  }
  firstName.updateValueAndValidity({
    emitEvent: false
  });
});

Answer 1

const personGroup = this.formBuilder.group({
  firstName: [
    person.firstName,
    (control: AbstractControl): ValidationErrors | null => {
      // do your validation logic here:
      if (this.formGroup?.get('lastName').value) {
        if (!control.value) {
          return {required: true};
        }
      }
      // all is fine:
      return null;
    }
  ],
  lastName: [
    person.lastName,
    (control: AbstractControl): ValidationErrors | null => {
      if (this.formGroup?.get('firstName').value) {
        if (!control.value) {
          return {required: true};
        }
      }
      return null;
    }
  ],
});