如何以角度形式实现条件要求验证？

Posted 2023-03-16

【中文标题】如何以角度形式实现条件要求验证？

【英文标题】：How to implement Conditional required validation in angular forms?

【发布时间】：2020-10-27 08:13:04

【问题描述】：

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

【问题讨论】：

您提供的这段代码有什么问题？

它不起作用

首先从第 2 行和第 3 行中删除删除 [Validators.required]，因为您希望这两个字段默认保持可选

@GopalZadafiya 它也不起作用，先生

【参考方案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;
    
  ],
);

【讨论】：

您提供的@MarkLatin stackblitz 代码按预期工作对吗？

@SivakumarTadisetti，我也在追求一个干净的实施，我对我的堆栈闪电战没有信心

@Mark ，这个 formGroup 是从哪里来的 Sir ？