angular - 我们如何在嵌套的 Angular Reactive Form 方法中使用复选框隐藏某些 DOM 元素

Question

当我们选中/取消选中复选框时，我试图显示或隐藏相应的 skillBox 元素。问题在这里，当我这样做时，所有 skillBox 都在 FormArray 中隐藏/显示。你能帮我只显示或隐藏相应的 FormArray 元素吗？

这是代码。

 <div class="row box">
    <div class="col-xs-12">
        <h4>Reactive Test Form</h4>
        <button class="btn btn-info" type="button" (click)="fnOnAddProfile()">Add Profile</button>
    <hr> 
    <form [formGroup]="ourForm" (ngSubmit)="fnSave()">
     <div formArrayName="apps">
       <div class="inner-box" *ngFor="let app of ourForm.get('apps').controls; let ind = index" >
      <div [formGroupName]="ind" >
        <div formGroupName="common">
          <div class="form-group">
          <label for="name">Name</label>
          <input type="text" class="form-control" formControlName="name" />
        </div>
        <div class="form-group">
          <label for="name">Profession</label>
          <input type="text" class="form-control" formControlName="profession" />
        </div>
        <label for="skillcheckbox">
          <input type="checkbox" formControlName="enableSkill"
          (change)="fnGetCheckBoxVal(app.get('common').get('enableSkill').value, ind)" /> Want to add Skill?
        </label>
        </div>
        <div *ngIf="isSkill" id="skillBox">
          <div class="row" formArrayName="skills">
            <div class="col-xs-12">
              <div class="form-group" *ngFor="let control of getSkills(app); let i = index">
                <input type="text" class="form-control" [formControlName]="i">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <h5>Please add your skills</h5>
              <button class="btn btn-primary" type="button" (click)="fnOnAddSkill(app,ind)">Add Skill</button>
            </div>
          </div>
        </div>
      </div>
       </div>
     </div>
      <hr>
      <div class="form-group">
        <button class="btn btn-success" type="submit">Save</button>
        &nbsp;
        <button class="btn btn-danger">Clear</button>
      </div>

    </form>
  </div>
</div>

这是 typescript 代码

import { Component, OnInit } from "@angular/core";
import { FormGroup, FormControl, FormArray, Validators } from "@angular/forms";
@Component({
  selector: "app-reactive-forms",
  templateUrl: "./reactive-forms.component.html",
  styleUrls: ["./reactive-forms.component.css"]
})
export class ReactiveFormsComponent implements OnInit {
  ourForm: FormGroup;
  isSkill: boolean = false;
  defaultApps: FormGroup;
  constructor() { }

  ngOnInit() {

    this.defaultApps = new FormGroup({
      common: new FormGroup({
        name: new FormControl(null),
        profession: new FormControl(null),
        enableSkill: new FormControl(false)
      }),
      skills: new FormArray([])
    });
    this.initForm();
    //  this.fnGetCheckBoxVal();
  }

  initSkills() {
    return   new FormGroup({
      common: new FormGroup({
        name: new FormControl(null),
        profession: new FormControl(null),
        enableSkill: new FormControl(false)
      }),
      skills: new FormArray([])
    });
  }



  initForm() {
    this.ourForm = new FormGroup({
      "apps": new FormArray([
        this.initSkills()
      ])
    });
   // (this.ourForm.get('apps') as FormArray).push(this.defaultApps);

  }
  // get formSkills() {
  //   // return (<FormArray>this.ourForm.get("skills")).controls;
  //   return (app.get('skills') as FormArray).controls;
  // }
  getSkills(control: FormArray) {
return (control.get('skills') as FormArray).controls;
  }

  fnOnAddSkill(app: FormControl, ind: number) {
    console.log(ind);
    const control = new FormControl(null, Validators.required);
    const myForm = app.get("skills") as FormArray;
    myForm.push(control);
  }
  fnSave() {
    console.log(this.ourForm);
    // console.log(this.ourForm.get('common').get('enableSkill'));
  }
  fnGetCheckBoxVal(value, index) {
    //  //.get('common').get("enableSkill")
    //  (this.ourForm.get('apps') as FormArray).valueChanges.subscribe(value => {
    //    console.log(value);
    //     value ? (this.isSkill = true) : (this.isSkill = false);
    //   });
    console.log(value, index);
    value ? (this.isSkill = true) : (this.isSkill = false);
  }
  fnOnAddProfile() {
    (this.ourForm.get('apps') as FormArray).push(this.initSkills());
  }
}

任何帮助将不胜感激。提前致谢。

Answer 1

您对所有配置文件使用相同的 bool 标志 isSkill，因此当您切换一个复选框时，它会切换所有。每个配置文件的 bool 标志必须是唯一的。我看到您已经有了 bool 形式控件 enableSkill。您可以利用它，然后您也不需要更改事件。因此，完全删除 fnGetCheckBoxVal(value, index)，而不是:

<div *ngIf="isSkill" id="skillBox">

使用:

<div *ngIf="app.get('common.enableSkill').value">

我不知道当您关闭它时，您是否真的想删除为配置文件输入的技能，但这是一个单独的问题。

这是我所做更改的演示: StackBlitz