使用 ngFormModel (ES6) 时，angular2 无法读取未定义的属性“验证器"

beyond

关注

发信

关注(28)粉丝(399)

使用 ngFormModel (ES6) 时，angular2 无法读取未定义的属性“验证器"

本文介绍了使用 ngFormModel (ES6) 时，angular2 无法读取未定义的属性“验证器"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在表单中使用 ngFormModel 指令时遇到了一些问题它说类型错误:无法读取 form_one 中未定义的属性‘验证器’(我从 NG-BOOK 2 教程中编写了这段代码，但它不起作用！)

从'angular2/core'导入{Component}进口 {FORM_指令，表单生成器，控制组，验证器来自'angular2/common'@成分({选择器:'demo-form-sku-builder'，指令:[FORM_DIRECIVES]，模板:`<div class="ui 凸起段"><h2 class="ui header">Demo Form:Sku with FormBuilder</h2><form class="ui 表单"[ngFormModel]="myForm"(ngSubmit)="onSubmit(myForm.value)"><div class="field"><label for="skuInput">SKU</label><输入类型="文本"id="skuInput"占位符=SKU"[ngFormControl]="myForm.controls['sku']">

<button type="submit" class="ui button">提交</button></表单>

`})导出类 DemoFormSkuBuilder {构造函数(formBuilder){this.myForm = formBuilder.group({'sku': ['', Validators.required]})}提交(值){console.log("你提交的值:", value);}}

(@Thierry Templier)

构造函数(formBuilder){this.fb = formBuilder;this.myForm = this.fb.group({'sku': ['', Validators.required]})}静态获取参数(){返回 [[FormBuilder]];}

我的图书馆:

import 'es6-shim';导入反射元数据"；导入'zone.js/dist/zone-microtask'导入'rxjs/Rx'导入'es6-promise'

解决方案

你需要在你的组件中定义一个表单控件:

从'angular2/common'导入{FormBuilder}；@成分({(……)})导出类 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 参数:

从'angular2/common'导入{FormBuilder}；@成分({(……)})导出类 DemoFormSkuBuilder {构造函数 (fb) {this.fb = fb;this.form_one = this.fb.group({(……)});}静态获取参数(){返回 [[FormBuilder]];}}

这是一个描述这种方法的工作 plunkr:https://plnkr.co/edit/ymSUUCvG5NFvmCGqzj2r?p=预览.

看到这个问题:

如何将Angular2 Http服务注入es6/7 班?

I got some problem when use ngFormModel directive with formit 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 无法读取未定义的属性“验证器"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-02 01:31