Issue
I am building a form using Angular Reactive Forms. The field I'm trying to add is a list of Checkboxes. The Checkbox will indicate the presence of a keyword, which is actually an object and not a string value. I could convert a string to the object during an onChange or onSubmit later on. The issue I am having is the checkboxes won't appear because it cannot find them in the FormArray
.
TS:
// class member:
availableKeywords = [
{value: false, viewValue: 'Impetus (Rush)', valueId: 0},
{value: false, viewValue: 'Guard (Taunt)', valueId: 1}
];
// in ngOnInit:
this.cardForm = new FormGroup({
// ...
keywords: new FormArray([]),
}
// after building my form, still in ngOnInit
// find all the keywords that are present in the "card" object (DBO), and enable them in my available keywords list
this.availableKeywords.filter((akw) => this.card.keywords.find(ckw => ckw.valueId === akw.valueId)).forEach(kw => kw.value = true);
//Now, add all the available keywords to the form with their current states:
const keywordArray = this.cardForm.get('keywords') as FormArray;
this.availableKeywords.forEach(akw => {
keywordArray.push(new FormControl(akw));
});
HTML:
<section formArrayName="keywords">
<div *ngFor="let keyword of availableKeywords; let i = index">
<mat-checkbox [formControlName]="i">
{{keyword.viewValue}}
</mat-checkbox>
</div>
</section>
I have a console.log(this.cardForm.value);
line right after all that, and it prints out the value of the form right before the error (both in screenshot).
The error:
Solution
The issue was not importing MatCheckboxModule
.
Answered By - Jeff
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.