angular2无法读取的未定义的属性'验证'的时候使用ngFormModel（ES6） [英] angular2 cannot read property 'validator' of undefined when use ngFormModel (ES6)

问题描述

我得到了一些问题，当使用ngFormModel指令与形式
它说：类型错误：无法读取的未定义的属性'验证'中form_one（！我写的NG-BOOK 2教程这个code，但它不能正常工作）

 进口从'angular2 /核心{}组件
进口{
  FORM_DIRECTIVES，
  FormBuilder，
  控制组，
  验证器
}从angular2 /通用@零件（{
  选择：演示外形SKU建设者，
  指令：[FORM_DIRECTIVES]
  模板：`
  ＆LT; D​​IV CLASS =UI提出了段＆GT;
    ＆LT; H2类=UI头＆GT;演示形式：SKU与FormBuilder＆LT; / H＆GT;
    ＆LT;窗​​体类=UI形式
      [ngFormModel] =myForm会
      （ngSubmit）=的onSubmit（myForm.value）＆GT;
      ＆LT; D​​IV CLASS =字段＆GT;
        ＆LT;标签=skuInput＆GT; SKU＆LT; /标签＆gt;
        ＆LT;输入类型=文本
          ID =skuInput
          占位=SKU​​
          [ngFormControl] =myForm.controls ['SKU']＆GT;
      ＆LT; / DIV＆GT;      ＆LT;按钮式=提交级=UI按钮＆GT;提交＆LT; /按钮＆GT;
    ＆LT; /表及GT;
  ＆LT; / DIV＆GT;
  `
}）
出口类DemoFormSkuBuilder {  构造器（formBuilder）{
      this.myForm = formBuilder.group（{
        SKU：[''，Validators.required]
      }）
  }  的onsubmit（值）{
    的console.log（您提交的值，值）;
  }
}
 

编辑：（@Thierry TEMPLIER）

 构造器（formBuilder）{
    this.fb = formBuilder;
    this.myForm = this.fb.group（{
      SKU：[''，Validators.required]
    }）
  }  静态get参数（）{
    返回[[FormBuilder]];
  }
 

我的库：

 进口'ES6-垫片';
进口反映的元数据';
进口'zone.js /距离/区域的microtask
进口'rxjs /接收
进口'ES6-承诺
 

解决方案

您需要在您的组件定义表单控件：

 进口来自{} FormBuilderangular2 /通用';@零件（{
  （......）
}）
出口类DemoFormSkuBuilder {
  构造器（私人FB：FormBuilder）{
    this.form_one = this.fb.group（{
      （......）
    }）;
  }
}
 

您可以看看这篇文章中的部分更多的细节使用现有的控制：

• 实施Angular2形式超越基础 - 的http://restlet.com/blog/2016/02/11/implementing-angular2-forms-beyond-basics-part-1/

修改

如果你想在ES6注入，您需要定义一个静态的getter参数：

 进口来自{} FormBuilderangular2 /通用';@零件（{
  （......）
}）
出口类DemoFormSkuBuilder {
  构造器（FB）{
    this.fb = FB;
    this.form_one = this.fb.group（{
      （......）
    }）;
  }  静态get参数（）{
    返回[[FormBuilder]];
  }
}
 

下面是plunkr描述这种方法工作一： https://plnkr.co/编辑/ ymSUUCvG5NFvmCGqzj2r？p = preVIEW 。

看到这个问题：

• How注入Angular2 HTTP服务到ES6 / 7级？

I got some problem when use ngFormModel directive with form it said "TypeError: Cannot read property 'validator' of undefined in form_one (I write this code from NG-BOOK 2 Tutorial but it's not work!)

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);
  }
}

edited: (@Thierry Templier)

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

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

my libraries:

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

解决方案

You need to define a form control in your component:

import {FormBuilder} from 'angular2/common';

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

You could have a look at this article for more details in the section "Using existing controls":

• Implementing Angular2 forms beyond basics - http://restlet.com/blog/2016/02/11/implementing-angular2-forms-beyond-basics-part-1/

Edit

If you want to inject within ES6, you need to define a static getter parameter:

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]];
  }
}

Here is a working plunkr describing this approach: https://plnkr.co/edit/ymSUUCvG5NFvmCGqzj2r?p=preview.

See this question:

• How to Inject Angular2 Http service into es6/7 Class?

这篇关于angular2无法读取的未定义的属性'验证'的时候使用ngFormModel（ES6）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！