3

我一直在看这段代码，但我被困住了：我有一个绑定到组件模型的表单，并且[(ngModel)]绑定破坏了页面 - 页面不会呈现。我没有收到编译错误，也没有运行时调试器错误，但页面不会呈现。

在此页面上，模型似乎工作正常 - 我可以看到模型值正常，{{todo.title}}但是当我尝试使用 [(ngModel)]="todo.title" 将值绑定到表单控件时，应用程序会中断。

这是表格：

<form name="form1" id="form1" novalidate>
    <div class="form-group">
        <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-bookmark"></i> </span>
            <input class="form-control"
                    name="title"
                    [(ngModel)]="todo.title"
                    placeholder="Enter the title for this ToDo"
                    required >
        </div>
    </div>
</form>

和超级简单的组件：

import { Component } from '@angular/core';
import { ToDo } from './todo';
import { ToDoListComponent } from './todo-list';


@Component({
    selector: 'todo-entry',
    templateUrl: 'app/todo-entry.html'
})
export class ToDoEntryComponent {     

    todo:ToDo = new ToDo();   

    new() {
        this.todo = new ToDo();                
    }    
}

和：

从'@angular/core'导入{组件}；

@Component({})
export class ToDo {
    title:string = "new todo";
    entered:Date = new Date();
}

如果我使用，代码可以工作（无论如何都是一种方式）：

value="{{todo.title}}"

我很确定模块加载和组件引用都是正确的，因为其他一切都按预期显示模型值，只要我不使用 [(ngModel)]。

有什么想法我在这里想念的吗？

4

4 回答 4

3

我认为问题在于 angular 看到您[(ngModel)]并认为您正在尝试使用 angular 形式，但没有其他支持指令。我不知道为什么你没有得到有用的错误描述。

如果我创建一个使用ngModel绑定但不使用角度形式的简单表单，则会收到此错误：

错误：如果在表单标签中使用 ngModel，则必须设置 name 属性，或者必须在 ngModelOptions 中将表单控件定义为“独立”。

 Example 1: <input [(ngModel)]="person.firstName" name="first">
 Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">

所以你可以按照错误所说的去做并添加到你的控件中，或者你可以在你的元素上[ngModelOptions]="{standalone: true}"使用毯子：ngNoFormform

<form name="form1" id="form1" novalidate noNoform>
于 2016-08-29T02:13:12.337 回答
2

永远不会失败-发布此内容并在经过一些额外搜索后在此处找到答案：http: //almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel

问题是缺少 Forms 模块的导入。在 RC5 及更高版本中，必须将以下内容添加到模块定义中：

 import { FormsModule } from '@angular/platform-browser';

并imports声明@NgModule：

@NgModule({
  imports: [ BrowserModule,FormsModule ],
  ...
}

就像大多数其他缺失的模块似乎所做的那样，这个错误在编译期间没有触发任何错误，这很痛苦。不知道为什么这个人不抱怨......

此外，我必须确保我使用name=title了附加（或代替）id=title。name绑定表单元素需要属性。

于 2016-08-29T02:05:12.340 回答
1

应用程序模块应该看起来像这样。确保您导入FormsModule.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],

  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }
于 2017-03-28T19:06:39.460 回答
0

您的 app.module.ts 应如下所示：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, provideForms, disableDeprecatedForms } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
providers: [
 disableDeprecatedForms(),
 provideForms()],
})

export class AppModule { }
于 2016-09-01T19:20:29.857 回答