Формы, управляемые моделью, с использованием angular2 RC2

После обновления до нового angular2 RC2 я попытался следовать документам, которые я нашел в Интернете, чтобы воссоздать форму, управляемую моделью, ниже приведен код

КОМПОНЕНТ.ts

import { REACTIVE_FORM_DIRECTIVES, FormGroup, FormControl } from '@angular/forms';

myForm = new FormGroup({
  name: new FormGroup({
     first: new FormControl(),
     last: new FormControl()
  })
});

Это HTML-код

<form formGroup="myForm"  >
   <div formGroupName="name">
     <input formControlName ="first" >
     <input formControlName ="last" >
  </div>
</form>

Но во время выполнения я получаю эту ошибку,

EXCEPTION: Error: Uncaught (in promise): Template parse errors:
No provider for NgControl ("
<form formGroup="myForm"  >
  <div formGroupName="name">
     [ERROR ->]<input formControlName ="first" >
     <input formControlName ="last" >
  </div>
"): ProductComponent@9:5

Кто-нибудь знает, что может быть причиной этой ошибки.

P.S. Новые формы, управляемые шаблоном, работают, но не управляются моделью
P.S. Я использую проект Angular2-seed от mgechev.


angular angular2-forms
person John Adetutu    schedule 17.06.2016    source источник
comment
вам нужно добавить ngModel к своим входам.... <input formControlName="first" ngModel> Вот как он знает, как сгенерировать элемент управления для инъекции. Вы также можете сделать привязку [(ngModel)]="myProperty", если вам это нужно. Это может измениться в ближайшем будущем, поэтому я не хочу отвечать.   -  person Jacob Roberts    schedule 18.06.2016
comment
Привет @JacobRobert, я попытался добавить ngModel к входным данным, но все равно получаю ту же ошибку [ERROR ->]<input formControlName="first" ngModel>. Я действительно не знаю, что я делаю неправильно, как вы думаете, вы можете показать мне рабочий пример на plunkr, чтобы я мог видеть, что не так или что-то в этом роде Спасибо.   -  person John Adetutu    schedule 18.06.2016

Ответы (2)


arrow_upward
2
arrow_downward

У меня была такая же ошибка после обновления до rc2. В main.ts я изменил эту строку
import { disableDeprecatedForms, provideForms } from '@angular/forms/index';
на
import { disableDeprecatedForms, provideForms } from '@angular/forms';

person noob    schedule 18.06.2016
comment
Спасибо, это была проблема. :) - person John Adetutu; 18.06.2016

arrow_upward
1
arrow_downward

Следующее может помочь:

Добавьте новые формы в файл packages.json.

"@angular/forms": "0.1.0",

Отключите устаревшие формы и включите новые формы в основном файле:

import {bootstrap} from '@angular/platform-browser-dynamic';
import {disableDeprecatedForms, provideForms} from '@angular/forms';

import {App} from './app';

bootstrap(App, [
    disableDeprecatedForms(),
    provideForms()
  ])
  .catch(err => console.error(err));

Директивы импорта компонента вашего приложения (FormControl, FormArray, FormGroup, REACTIVE_FORM_DIRECTIVES) из новых форм. Обратите внимание, что ngFormModel теперь является formGroup, а ngControl теперь является formControlName.

import {Component} from '@angular/core'
import { FormControl, FormArray, FormGroup, REACTIVE_FORM_DIRECTIVES, FormBuilder, Validators } from '@angular/forms';


@Component({
    selector: 'my-app',
    providers: [],
    template: `
        <div>
          <form [formGroup]="form">
                 <input [formControlName]="first">
                 <input [formControlName]="last">
          </form>
        </div>
      `,
    directives: [REACTIVE_FORM_DIRECTIVES]
})
export class App {
    public form: FormGroup;

    constructor(
        private fb: FormBuilder
    ) {

        this.form = fb.group({
            first: ["", Validators.required],
            last: ["", Validators.required]
        });
    }

}

Надеюсь, это поможет.

person Naveed Ahmed    schedule 18.06.2016