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

Question

这里我的场景是我有 3 个用户

1. admin将有 3 个字段 email,firstname,lastname。

2. 员工将有 4 个字段 email,firstname,lastname,contact。

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 中包含禁用字段，那么您用于引用表单元素的 object 必须是：

this.userForm.getRawValue();

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

this.userForm.get('contact').satValue(my Value)

但是为了安全措施，我随时更新表单元素值我运行 function

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>