FormArray 对象上的patchValue？答案

【问题标题】：patchValue on a FormArray object?FormArray 对象上的patchValue？
【发布时间】：2020-04-26 15:07:29
【问题描述】：

我有一系列语言供用户选择，还有一种默认语言可供选择。选择默认语言后，我想确保该语言的复选框也以编程方式被选中。

我不确定如何在语言的 FormArray 上使用 patchValue。

component.ts

import { FormGroup, FormControl, FormArray, Validators } from '@angular/forms';
...

constructor(...) {
    this.languages = ['English', 'Spanish', 'Mandarin', 'Klingon'];

    this.myForm = new FormGroup({
        languages: this.createLanguagesControl(),
        defaultLanguage: new FormControl('', Validators.required)
    });
}

createLanguagesControl() {
    const controls = this.languages.map(language => {
        return new FormControl(false);
    });
    return new FormArray(controls);
}

defaultLanguageSelection() {
    let formValues = this.myForm.value;
    console.log('defaultLanguageSelection', formValues.defaultLanguage);

    let i = 0;
    for (let language of this.languages) {
        if (language == formValues.defaultLanguage) {              // find the index of our newly-selected default language in the languages array
            this.myForm.patchValue({languages: {i: true}});        // make sure the language is checked
        }
        i++;
    }
}

component.html

<mat-card-content>

    <div formArrayName="languages" *ngFor="let language of languages; index as i">
        <mat-checkbox formControlName="{{ i }}">
            {{ language }}
        </mat-checkbox>
    </div>

    <mat-form-field>
        <mat-label>Default Language</mat-label>
        <mat-select formControlName="defaultLanguage">
            <mat-option *ngFor="let language of languages" [value]="language" (click)="defaultLanguageSelection()">
                {{ language }}
            </mat-option>
        </mat-select>
    </mat-form-field>

</mat-card-content>

【问题讨论】：

能否为这个问题创建 stackblitz 工作项目。
@Ryan，如果您真的只想存储唯一变量 -defaultLanguage-，为什么还要使用 FormArray？，请查看我的答案
嗨@Eliseo，这是我正在尝试构建的完整代码的一个非常简化的示例:)

标签： angular angular-reactive-forms angular-forms formbuilder formarray

【解决方案1】：

先获取语言formArray，然后在匹配控件上使用patchValue

let langArr = <FormArray>this.myForm.controls["languages"];
langArr.controls[i].patchValue(true);     // i is the matching index

Stackblitz demo

【讨论】：

【解决方案2】：

您不需要使用 FormArray 来显示所选语言或使用复杂的 formGroup 来存储简单值。如果您有唯一变量，请使用 FormControl

defaultLanguage:FormControl=new FormControl('')

//and the .html

<mat-form-field>
    <mat-label>Default Language</mat-label>
    <mat-select [formControl]="defaultLanguage">
        <mat-option *ngFor="let language of languages" [value]="language">
            {{ language }}
        </mat-option>
    </mat-select>
</mat-form-field>

如果你想显示是否在列表中被选中，只需使用 defaultLanguage.value，有些像 (*)

<div *ngFor="let language of languages; index as i">
    <mat-checkbox [checked]="language==defaultLanguage.value"
                  (change)="defaultLanguage.setValue($event.checked?language:null)">
        {{ language }}
    </mat-checkbox>
</div>

(*) 如果你想更改 defaultLanguage，我会写代码检查一些复选框，如果你只想显示即使它是不必要的输入，只需一个

<div *ngFor="let language of languages; index as i">
       {{language==defaultLanguage.value?'ok':''}}{{ language }}
</div>

见stackblitz

【讨论】：