在 Reactive Forms 复选框中设置默认值

Question

我有一个带有复选框的响应式表单。复选框数组值是从 API 获取的。如果数组属性为“isSelected”，我需要默认设置复选框值：true，（我还需要使用选定值获取该默认值） 谁能帮帮我。

这是我尝试过的。

     getData(){
    {
       this.age= [
        {
            "ageID": 1,
             "description": "0-5 years",
            "isSelected": true
        },
        {
            "ageID": 2,
             "description": "5-15 years",
            "isSelected": true
        },
        {
            "ageID": 3,
             "description": "15-35",
            "isSelected": false
        },
        {
            "ageID": 4,
             "description": "35-60",
            "isSelected": false
        }
    ],
    this.language= [
        {
            "languageID": 1,
            "description": "Arabic",
            "isSelected": false
        },
        {
            "languageID": 2,
            "description": "Chinese",
            "isSelected": false,
        },
        {
            "languageID": 3,
            "description": "Hindi",
            "isSelected": false,
        },
        {
            "languageID": 4,
            "description": "Tamil",
            "isSelected": true,
        },
        {
            "languageID": 5,
            "description": "Japanese",
            "isSelected": true,
        },
    ]
    }
  }

 onAgeChange(age: any, isChecked: boolean){
    const ageFormArray = <FormArray>this.exampleForm.controls.ages;

    if (isChecked) {
      ageFormArray.push(new FormControl(age));

      for(let item in ageFormArray.value){
        let obj =  {
          "ageID":  ageFormArray.value[item],
          "isSelected": true,
        }
        console.log(obj)
      }
    } else {
      let index = ageFormArray.controls.findIndex(x => x.value == age)
      ageFormArray.removeAt(index);
    }
  }

   onLanguageChange(language: any, isChecked: boolean){
    const languageFormArray = <FormArray>this.exampleForm.controls.languages;

    if (isChecked) {
       languageFormArray.push(new FormControl(language));

      for(let item in languageFormArray .value){
        let obj =  {
          "ageID":  languageFormArray.value[item],
          "isSelected": true,
        }
        console.log(obj)
      }
    } else {
      let index = languageFormArray.controls.findIndex(x => x.value == language)
      languageFormArray.removeAt(index);
    }
  }

HTML

    <div>
  <h1>Reactive form</h1>
    <div class="custom-control custom-checkbox" *ngFor="let data of age let j = index">

        <input type="checkbox" (change)="onAgeChange( data.ageID ,$event.target.checked,$event)" name="age"> {{data.description}}<br>
                    </div>

<br>
                    <div class="custom-control custom-checkbox">
                            <div class="custom-control custom-checkbox" *ngFor="let data of language">
                                <input type="checkbox"  (change)="onLanguageChange(data.description, $event.target.checked)"> {{data.description}}<br>
                            </div>
                        </div>


</div>

https://stackblitz.com/edit/angular-4yfrhh

Answer 1

好的，我已经设法通过使用创建formArray 控件的标准方法为您解决了这个问题。这是代码的 sn-p，您可以在下面提供的 stackblitz 示例中查看完整的工作解决方案（并对其进行测试）。

<form [formGroup]="exampleForm">
    <div class="custom-control custom-checkbox" *ngFor="let data of exampleForm.get('ages').controls; let j = index" formArrayName="ages">
        <div [formGroupName]="j">

            <input type="checkbox" (change)="onAgeChange(data.ageID, $event.target.checked, $event)" name="age" formControlName="isSelected"> {{data.value.description}}<br>
        </div>
    </div>
    <br>
    <div class="custom-control custom-checkbox">
        <div class="custom-control custom-checkbox" *ngFor="let data of language; let j = index" formArrayName="languages">
          <div [formGroupName]="j">
              <input type="checkbox" formControlName="isSelected" (change)="onLanguageChange(data.description, $event.target.checked)"> {{data.description}}<br>
          </div>
        </div>
    </div>
</form>

我在这里留下了change 事件，尽管这只是为了测试目的...此外，您可以看到有两种使用 formArrays 的方法，因此请选择您认为更好（或更漂亮）的方法来使用...： )

let ageFGs = this.age.map(x => {
   return this.fb.group({
      ageID: x.ageID,
      description: x.description,
      isSelected: x.isSelected
   });
});
this.exampleForm = this.fb.group({
    ages: this.fb.array(ageFGs)
});

您可以查看整个解决方案here。

希望这会有所帮助...