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

问题描述

使用ngFormModel指令时，我使用form
表示formError：无法读取form_one中未定义的属性验证器（我从NG-BOOK 2教程中编写代码但不起作用）时，我遇到了一些问题。 / p>

  import'Component2 from'angular2 / core'
 import {
 FORM_DIRECTIVES，
 FormBuilder ，
 ControlGroup，
验证器
} from'angular2 / common'
 
 @Component（{
 selector：'demo-form-sku-builder' ，
指令：[FORM_DIRECTIVES]，
模板：`
< div class =ui raise segment> 
< h2 class =ui header>演示表单：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
 [ngF ormControl] =myForm.controls [ SKU]> 
< / div> 
 
< button type =submitclass =ui button> Submit< / button> 
< / form> 
< / div> 
`
}）
 export class DemoFormSkuBuilder {
 
 contructor（formBuilder）{
 this.myForm = formBuilder.group（{
' sku'：['，Validators.required] 
}）
} 
 
 onSubmit（value）{
 console.log（你提交的值：，值）; 
} 
} 
  

编辑：（@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'
  

解决方案

您需要在组件中定义一个表单控件：

<$来自'angular2 / common'的p $ p> import {FormBuilder};

@Component（{
（...）
}）
export class DemoFormSkuBuilder {
contructor（private fb：FormBuilder）{
this.form_one = this.fb.group（{
（...）
}）;
}
}


您可以看看这篇文章了解更多详情在使用现有控件部分中：

• 实现Angular2表单超越基础 - http://restlet.com/blog/2016/02/11/implementing-angular2-表单超越基础 - 第1部分/

修改

如果要在ES6中注入，需要定义一个静态getter参数：

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

这是一个描述这种方法的工作人：

看到这个问题：

• 如何将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?

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