时间戳

首页 > 解决方案 > 双向事件绑定在表单标签Angular 2中不起作用

forms - 双向事件绑定在表单标签Angular 2中不起作用

问题描述

我有一个form其中有一个input. 我在 上应用了双向事件绑定input，但是，它不起作用。我已经导入了FormsModule我的AppModule，我没有收到任何错误。

search.component.html：

<form>
  <h1>{{ query }}</h1>
  <input [(ngModel)]="query">
</form>

search.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})
export class SearchComponent {
  public query: string;
  
  constructor() {}
}

当我不包含标签时它可以工作：form

<h1>{{ query }}</h1>
<input [(ngModel)]="query">

但我需要form用于提交。有什么想法有什么问题吗？

相关线程。

标签： formsinputangular2-formstwo-way-bindingangular2-ngmodel

解决方案

后来我得到了以下错误，不知道为什么它没有早点出现：

ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form
      control must be defined as 'standalone' in ngModelOptions.

      Example 1: <input [(ngModel)]="person.firstName" name="first">
      Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">
    at Function.missingNameException (forms.js:4716)
    at NgModel._checkName (forms.js:5050)
    at NgModel._checkForErrors (forms.js:5033)
    at NgModel.ngOnChanges (forms.js:4956)
    at NgModel.rememberChangeHistoryAndInvokeOnChangesHook (core.js:2197)
    at callHook (core.js:3109)
    at callHooks (core.js:3075)
    at executeInitAndCheckHooks (core.js:3027)
    at refreshView (core.js:7333)
    at refreshComponent (core.js:8465)

正如建议的那样，我通过添加解决了它[ngModelOptions]="{standalone: true}"：

<form>
  <h1>{{ query }}</h1>
  <input [(ngModel)]="query" [ngModelOptions]="{standalone: true}">
</form>

您还可以选择指定的第二条路线，即添加一个name属性并放置任何内容：

<form>
  <h1>{{ query }}</h1>
  <input [(ngModel)]="query" name="something">
</form>

推荐阅读