Forms 角度2:'；ngFormModel'；因为它不是'；这不是已知的本地财产

我的错误是

---

问题是您仍然在从

common

导入，尤其是使用旧表单的说明。 正确导入新表单的组件：

import {FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES} from '@angular/forms';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

并更正组件：

@Component({
    ...
    directives: [FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES]
})
export class AppComponent {

    form: FormGroup;

    constructor(fbld: FormBuilder) {

        this.form = fbld.group({
            ...

        });


    }

    ...

}

然后更正视图：

ngFormModel

已被

formGroup

替换，并对字段使用

formControl

：

<form  [formGroup]="form" (ngSubmit)="onSubmit(form.value)">

    <div class="row">

        <div class="form-group">     
            <label class="formHeading">firstname</label>
            <input type="text" id="facebook" class="form-control" [formControl]="form.controls['firstname']" >  
        </div>

        <div *ngIf ="form.controls['firstname'].touched">
            <div *ngIf ="!form.controls['firstname'].valid" class = "alert alert-danger">
            <strong>First name is required</strong>
            </div>  
        </div>

        ... 

        <div class="form-row btn">

            <button type="submit" class="btn btn-primary" [disabled]="!form.valid">Save</button>

        </div>

    </div>
</form>

如果使用共享模块，请不要忘记导出它们：

@NgModule({
    imports: [
        ...
        FormsModule,
        ReactiveFormsModule
    ],
    exports: [
        ...
        FormsModule,
        ReactiveFormsModule
    ]
})

export class SharedModule { }

---

只需在ts中导入以下语句

import {FORM_DIRECTIVES, FormBuilder, Validators, REACTIVE_FORM_DIRECTIVES} from '@angular/forms';
directives: [CORE_DIRECTIVES, ROUTER_DIRECTIVES, FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES],

在模板中进行以下更改

<h3 class = "head">MY PROFILE</h3>

 <form  [ngFormModel]="form" (ngSubmit)="onSubmit(form.value)">
 <div class="row">
  <div class="form-group">     
     <label class="formHeading">firstname</label>
   <input type="text" id="facebook" class="form-control"   [formControl]="form.controls['firstname']">  
   </div>
       <div *ngIf ="firstname.touched">
      <div *ngIf ="!firstname.valid" class = "alert alert-danger">
       <strong>First name is required</strong>
  </div>  
 </div>
<div class="form-group">
<label class="formHeading">lastname</label>
<input type="text" id="facebook" class="form-control col-xs-3" [formControl]="form.controls['lastname']">  
   </div>
  <div *ngIf ="lastname.touched" >
     <div *ngIf = "!lastname.valid" class = "alert alert-danger">
         <strong>Last name is required</strong>
     </div>
   </div>
    <div class="form-group">
   <label class="formHeading">Profilename</label>
    <input type="text" id="facebook" class="form-control col-xs-3" [formControl]="form.controls['profilename']" >  
 </div>
   <div class="form-group">
  <label class="formHeading">Phone</label>
   <input type="text" id="facebook" class="form-control col-xs-3" [formControl]="form.controls['phone']">  
   </div>

  <div *ngIf ="phone.touched" >
     <div *ngIf = "!phone.valid" class = "alert alert-danger">
        <strong>Phone number is required</strong>
     </div>
  </div>

 <div class="form-row btn">
<button type="submit" class="btn btn-primary  "    [disabled]="!form.valid">Save</button>
</div>

---

我也有同样的问题。我是如何解决的：

• 移除标记，并向按钮添加（单击）-功能
• 检查我的后端：在某些特殊事件中出错。。。修好了

现在它不再发射两次了。

---

所以再检查一遍！您永远不知道……

寻求调试帮助的问题（“为什么此代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现这些问题所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：如何创建一个最小的、完整的、可验证的示例。您确定您在rc.4中使用了最新的@angular/forms 0.2.0吗？在您看来，有一个不再使用的

ngControl

。我已在此中插入了您的模板，它工作正常。此外，您对组件中表单的所有导入都是从

common

导入的，而不是从新的

表单导入的。你看，Robisim，我对此不感兴趣…..真的，我建议你按照检查确认你的环境设置良好，然后按照我已经发布给你的新表单指南进行操作。嗨，Robisim，最后，它成功了，但经过上述修改，我错过了验证，错误未定义为“触碰”，您必须使用：
form.controls['phone'].toucted
和
form.controls['phone'].valid
现在错误已被清除，但我没有在我的表单中获得验证………我使用Angular2 RC5时出现此错误。我不得不重新添加上面显示的
指令：[FORM\u directions，REACTIVE\u FORM\u directions]
组件属性以使其正常工作，尽管我认为我们不应该再使用它了。Hi@Helzgate。您是否已在
AppModule
中导入
FormsModule
和
ReactiveFormsModule
？
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
    imports: [
        ...
        FormsModule,
        ReactiveFormsModule
    ],
    ...
    bootstrap: [AppComponent]
})

export class AppModule { }

@NgModule({
    imports: [
        ...
        FormsModule,
        ReactiveFormsModule
    ],
    exports: [
        ...
        FormsModule,
        ReactiveFormsModule
    ]
})

export class SharedModule { }

import {FORM_DIRECTIVES, FormBuilder, Validators, REACTIVE_FORM_DIRECTIVES} from '@angular/forms';
directives: [CORE_DIRECTIVES, ROUTER_DIRECTIVES, FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES],

<h3 class = "head">MY PROFILE</h3>

 <form  [ngFormModel]="form" (ngSubmit)="onSubmit(form.value)">
 <div class="row">
  <div class="form-group">     
     <label class="formHeading">firstname</label>
   <input type="text" id="facebook" class="form-control"   [formControl]="form.controls['firstname']">  
   </div>
       <div *ngIf ="firstname.touched">
      <div *ngIf ="!firstname.valid" class = "alert alert-danger">
       <strong>First name is required</strong>
  </div>  
 </div>
<div class="form-group">
<label class="formHeading">lastname</label>
<input type="text" id="facebook" class="form-control col-xs-3" [formControl]="form.controls['lastname']">  
   </div>
  <div *ngIf ="lastname.touched" >
     <div *ngIf = "!lastname.valid" class = "alert alert-danger">
         <strong>Last name is required</strong>
     </div>
   </div>
    <div class="form-group">
   <label class="formHeading">Profilename</label>
    <input type="text" id="facebook" class="form-control col-xs-3" [formControl]="form.controls['profilename']" >  
 </div>
   <div class="form-group">
  <label class="formHeading">Phone</label>
   <input type="text" id="facebook" class="form-control col-xs-3" [formControl]="form.controls['phone']">  
   </div>

  <div *ngIf ="phone.touched" >
     <div *ngIf = "!phone.valid" class = "alert alert-danger">
        <strong>Phone number is required</strong>
     </div>
  </div>

 <div class="form-row btn">
<button type="submit" class="btn btn-primary  "    [disabled]="!form.valid">Save</button>
</div>

import {provideForms, disableDeprecatedForms} from '@angular/forms';
bootstrap(MyDemoApp, [
provideForms(),
disableDeprecatedForms()]);