У меня не получается получить двухстороннюю привязку для работы с formGroups
моя цель; чтобы флажки, которые добавляли или удаляли элементы, формировали массив, который будет храниться ... и, если модель имеет элемент, форму следует предварительно проверить.
Я получаю ошибку:
Error:
ngModel cannot be used to register form controls with a parent formGroup directive. Try using
formGroup's partner directive "formControlName" instead. Example:
Разочарован и нужна помощь!
StackBitz ведет себя немного странно, не изменяя метки - но это может быть из-за ошибки.
https://stackblitz.com/edit/angular-bfkaa4
КОМПОНЕНТ:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { MyClassesModel } from './myClasses.model';
@Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
classesList: string[];
selectedClasses: string[];
form: FormGroup;
model = new MyClassesModel({});
loading = false;
constructor( ) { }
formDisabled () {
return this.loading === true;
}
formModel () {
return {
myClasses: this.form.get('myClasses').value,
};
}
ngOnInit() {
this.selectedClasses = [];
this.classesList = [
'English',
'Spanish',
'Italian',
];
this.form = new FormGroup({
myClasses: new FormControl({
value: this.selectedClasses,
disabled: this.formDisabled,
})
});
}
checkClasses(e) {
console.log(e.value);
}
submitForm() {}
}
FORM:
<form novalidate="novalidate"
autocomplete="off"
[formGroup]="form"
(ngSubmit)="submitForm()" >
<label>My Classes:</label>
<div *ngFor="let name of classesList">
<input type="checkbox"
name="myClasses[]"
[(ngModel)]="myClasses"
(change)="checkClasses($event)"
[value]="name" >
{{name}}
</div>
</form>
{{form.value|json}}
Спасибо заранее.
Приветствия