角度根据需要根据其他字段有条件地设置字段

时间:2020-07-06 13:55:00

标签: javascript angular typescript form-fields

如果两个字段都没有输入,那么两个字段都是可选的。如果输入了名字,则根据需要设置姓氏。如果姓氏有输入,而姓氏无输入,则根据需要设置姓氏。

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

#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>

#formgroup

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

0 个答案:

没有答案