angular2 не может прочитать свойство «валидатор» неопределенного при использовании ngFormModel (ES6)

У меня возникла проблема при использовании директивы ngFormModel с формой, в которой говорилось: «Ошибка типа: невозможно прочитать свойство« валидатор »неопределенного в form_one (я пишу этот код из учебника NG-BOOK 2, но это не работает!)

import {Component} from 'angular2/core'
import {
  FORM_DIRECTIVES,
  FormBuilder,
  ControlGroup,
  Validators
} from 'angular2/common'

@Component({
  selector: 'demo-form-sku-builder',
  directives: [FORM_DIRECTIVES],
  template: `
  <div class="ui raised segment">
    <h2 class="ui header">Demo Form: Sku with FormBuilder</h2>
    <form class="ui form"
      [ngFormModel]="myForm"
      (ngSubmit)="onSubmit(myForm.value)">
      <div class="field">
        <label for="skuInput">SKU</label>
        <input type="text"
          id="skuInput"
          placeholder="SKU"
          [ngFormControl]="myForm.controls['sku']">
      </div>

      <button type="submit" class="ui button">Submit</button>
    </form>
  </div>
  `
})
export class DemoFormSkuBuilder {

  contructor (formBuilder) {
      this.myForm = formBuilder.group({
        'sku': ['', Validators.required]
      })
  }

  onSubmit(value) {
    console.log("you submitted value: ", value);
  }
}

отредактировано: (@Thierry Templier)

contructor (formBuilder) {
    this.fb = formBuilder;
    this.myForm = this.fb.group({
      'sku': ['', Validators.required]
    })
  }

  static get parameters() {
    return [[FormBuilder]];
  }

мои библиотеки:

import 'es6-shim';
import 'reflect-metadata';
import 'zone.js/dist/zone-microtask'
import 'rxjs/Rx'
import 'es6-promise'

angular ecmascript-6 angular2-forms angular2-formbuilder
person apipol sukgler    schedule 22.02.2016    source источник
comment
Вы не установили свойство form_one в DemoFormSkuBuilder.   -  person martin    schedule 22.02.2016

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно определить элемент управления формой в вашем компоненте:

import {FormBuilder} from 'angular2/common';

@Component({
  (...)
})
export class DemoFormSkuBuilder {
  contructor (private fb:FormBuilder) {
    this.form_one = this.fb.group({
      (...)
    });
  }
}

Вы можете ознакомиться с этой статьей для более подробной информации в разделе «Использование существующих элементов управления»:

Изменить

Если вы хотите внедрить в ES6, вам нужно определить статический параметр геттера:

import {FormBuilder} from 'angular2/common';

@Component({
  (...)
})
export class DemoFormSkuBuilder {
  contructor (fb) {
    this.fb = fb;
    this.form_one = this.fb.group({
      (...)
    });
  }

  static get parameters() {
    return [[FormBuilder]];
  }
}

Вот рабочий plunkr, описывающий этот подход: =предварительный просмотр.

Смотрите этот вопрос:

person Thierry Templier    schedule 22.02.2016
comment
но я написал на ES6, так что он может определить тип? Я обновил исходный код - person apipol sukgler; 22.02.2016
comment
Да, ты прав. Если вы используете только ES6, вам нужно сделать что-то особенное. Подробнее см. в этом вопросе: stackoverflow.com/questions/33026015/. - person Thierry Templier; 22.02.2016
comment
Не могли бы вы предоставить файлы JS, которые вы включили в основной файл HTML, и конфигурацию, чтобы попытаться воспроизвести вашу проблему? - person Thierry Templier; 22.02.2016
comment
Вот рабочий plunkr, использующий этот подход: plnkr.co/edit/ymSUUCvG5NFvmCGqzj2r?p=preview. - person Thierry Templier; 22.02.2016