如何在 Angular Reactive 表单中根据条件以动态方式显示/隐藏字段

Question

我的场景是我有 3 个用户

1. 管理员 将有 3 个字段电子邮件、名字、姓氏。

2. 员工将有 4 个字段：电子邮件、名字、姓氏、联系方式。

3. frontOffice将有 5 个字段 email、firstname、lastname、airlineDetails、vendor、personNames。

stackblitz 链接 -：https ://stackblitz.com/edit/angular-material-forms-deborahk-jgxzic

根据条件，我必须显示这些字段并根据此处将值设置为这些字段，我遵循了禁用字段的方法，如下所示

 this.userForm = new FormGroup({
      email : new FormControl(null, Validators.email),
      firstName : new FormControl(null, Validators.required),
      lastName : new FormControl(null, Validators.required),
      contact: new FormControl({value: '', disabled: false}, Validators.required),
      airlineDetails: new FormControl({value: '', disabled: false}, Validators.required),
      vendor: new FormControl({value: '', disabled: false}, Validators.required),
      personNames: new FormControl({value: '', disabled: false}, Validators.required)
    });

  if(this.userOne=="admin"){
        this.userForm.get('contact').disable();
        this.userForm.get(' airlineDetails').disable();
        this.userForm.get('vendor').disable();
        this.userForm.get('personNames').disable();
    }
    if(this.userTwo=="employee"){
      this.userForm.get('contact').enable();
        this.userForm.get('airlineDetails').disable();
        this.userForm.get('vendor').disable();
        this.userForm.get('personNames').disable();
    }
     if(this.userTwo=="frontOffice"){
      this.userForm.get('contact').disable();
        this.userForm.get(' airlineDetails').enable();
        this.userForm.get('vendor').enable();
        this.userForm.get('personNames').enable();
    }
  }

有没有其他方法可以隐藏和显示字段，然后在其中设置值

下面是我的代码：

<mat-toolbar color="primary">
 <button type="button" (click)=" userData('admin')">ADMIN</button>
 &nbsp;
  <button type="button" (click)=" userData('employee')">EMPLOYEES</button>
   &nbsp;
  <button type="button" (click)=" userData('frontOffice')">frontOffice</button>

</mat-toolbar>

<div class="container" > 
  <form [formGroup]=" userForm" (ngSubmit)="onClick()" class="form">
   <!--Email-->
    <mat-form-field class="form-element" (ngSubmit)="onClick()">
      <input matInput type="email" placeholder="Email Address" formControlName="email">
    </mat-form-field>
   <!--First Name--> 
    <mat-form-field class="form-element">
      <input matInput type="text" placeholder="First name" formControlName="firstName">
    </mat-form-field>
     <!--last Name--> 
    <mat-form-field class="form-element">
      <input matInput type="text" placeholder="First name" formControlName="lastName">
    </mat-form-field>

    <!------------------------------------------------------------------->
    <mat-form-field class="form-element">
      <input matInput type="text" placeholder="contact" formControlName="contact">
    </mat-form-field>
 <!------------------------------------------------------------------->
    <mat-form-field class="form-element">
      <input matInput type="text" placeholder="airline details" formControlName="airlineDetails">
    </mat-form-field>
 <!------------------------------------------------------------------->
     <mat-form-field class="form-element">
      <input matInput type="text" placeholder="vendor" formControlName="vendor">
    </mat-form-field>

     <mat-form-field class="form-element">
      <input matInput type="text" placeholder="persons Names" formControlName="personNames">
    </mat-form-field>

  <button  type="submit" [disabled]="userForm.invalid">Submit</button>
    

  </form>
</div>

.ts 代码

 userForm: FormGroup;
  titleAlert: string = 'This field is required';
  post: any = '';
  userOne="admin";
  userTwo="employee";
  userThree="frontOffice"

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.createForm();
   
  }

  createForm() {
    this.userForm = new FormGroup({
      email : new FormControl(null, Validators.email),
      firstName : new FormControl(null, Validators.required),
      lastName : new FormControl(null, Validators.required),
      contact: new FormControl({value: '', disabled: false}, Validators.required),
      airlineDetails: new FormControl({value: '', disabled: false}, Validators.required),
      vendor: new FormControl({value: '', disabled: false}, Validators.required),
      personNames: new FormControl({value: '', disabled: false}, Validators.required)
    });

  }



 onClick(){
   console.log(this.userForm.value)
 }

  userData(params){
     if(this.userOne=="admin"){
        this.userForm.get('contact').disable();
        this.userForm.get(' airlineDetails').disable();
        this.userForm.get('vendor').disable();
        this.userForm.get('personNames').disable();
    }
    if(this.userTwo=="employee"){
      this.userForm.get('contact').enable();
        this.userForm.get('airlineDetails').disable();
        this.userForm.get('vendor').disable();
        this.userForm.get('personNames').disable();
    }
     if(this.userTwo=="frontOffice"){
      this.userForm.get('contact').disable();
        this.userForm.get(' airlineDetails').enable();
        this.userForm.get('vendor').enable();
        this.userForm.get('personNames').enable();
    }
  }

Answer 1

因此，您实际上可以在禁用/隐藏的表单元素上设置值。如果您想在引用/传递到后端的 formData 中包含禁用字段，则用于引用表单元素的对象需要是：

this.userForm.getRawValue();

这会获取所有表单属性，而 form.value 属性不包括禁用元素。您可以使用以下命令从组件文件中设置表单值

this.userForm.get('contact').setValue(<my-value>)

但为了安全起见，每当我更新表单元素值时，我都会运行该函数

this.userForm.get('contact').updateValueAndValidity();
// I think this.userForm.updateValueAndValidity() may work on the whole form, 
// but last time I was messing with it I had some issues.

编辑

为了隐藏在模板中而不拥挤 dom 我会做

<ng-container *ngIf="userForm.get('contact').disabled">...</ng-container>