角度形式的条件要求验证答案

【问题标题】：Conditional required validation in angular forms角度形式的条件要求验证
【发布时间】：2020-10-26 19:19:50
【问题描述】：

如果两个字段都没有输入，那么两者都可以是可选的。如果 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>

#代码

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

【问题讨论】：

标签： javascript angular typescript requiredfieldvalidator

【解决方案1】：

订阅表单控件值变化，根据条件更新值和有效性。

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

工作代码

https://stackblitz.com/edit/angular-wfab5s?file=src%2Fapp%2Fapp.component.ts

【讨论】：

请问，使用自定义验证器不是更好吗？