[英]patchValue on a FormArray object?
I have an array of languages for a user to select and a default language to pick.我有一组语言供用户选择,还有一种默认语言可供选择。 When a default language is selected, I want to make sure the checkbox for that language is also selected programmatically.
选择默认语言后,我想确保以编程方式选中该语言的复选框。
I'm not sure how to use patchValue on the FormArray of languages.我不确定如何在语言的 FormArray 上使用 patchValue。
component.ts组件.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组件.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>
Get language formArray
first and then use patchValue
on the matching control先获取语言
formArray
,然后在匹配控件上使用patchValue
let langArr = <FormArray>this.myForm.controls["languages"];
langArr.controls[i].patchValue(true); // i is the matching index
You don't need use a FormArray to show the selected language or a complex formGroup to store a simple value.您不需要使用 FormArray 来显示所选语言或使用复杂的 formGroup 来存储简单值。 If you has an unique variable use a FormControl
如果您有一个唯一变量,请使用 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>
If you want to show if is checked in a list just use defaultLanguage.value, some like (*)如果要显示是否在列表中选中,只需使用 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>
(*) I write the code if you want to change the defaultLanguage checking some checkbox, If you only whant to show even it's innecesary a input, just a (*) 如果你想改变 defaultLanguage 检查一些复选框,我写了代码,如果你只想显示即使它是不必要的输入,只是一个
<div *ngFor="let language of languages; index as i">
{{language==defaultLanguage.value?'ok':''}}{{ language }}
</div>
See the stackblitz查看堆栈闪电战
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.