Угловая привязка 5 флажков с formGroups - PullRequest
0 голосов
/ 05 ноября 2018

У меня не получается получить двухстороннюю привязку для работы с 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}}

Спасибо заранее. Приветствия

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...