Angular ngmodel 忽略表单输入中的值属性

Question

我是 angular 的新手，**我想要实现的是 ** 我需要一个表单中的输入框，该表单具有我从父组件，我正在使用模板驱动的表单，所以我尝试的是

<input
                  type="text"
                  id="empinput1"
                  class="form-control"
                  name="empid"
                  ngModel
                  [value]="data['empid']"
                />

注意，数据是我从父组件得到的输入

通常，onsubmit 给出与输入框名称属性相关的输入值，因此我可以发送到 API 但这给了我一个空白的输入框，而不是填充 [value] 字段设置的值非常感谢任何帮助：D

Answer 1

你应该使用 ngmodel:

Creates a FormControl instance from a domain model and binds it to a form control element.

因此，对于您的情况（更多信息 here）：

<input type="text" id="empinput1" class="form-control" name="empid" [(ngModel)]="data['empid']"/>

如果您想在表单中使用，您可以查看 angular 示例 here:

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

@Component({
  selector: 'example-app',
  template: `
    <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
      <input name="first" ngModel required #first="ngModel">
      <input name="last" ngModel>
      <button>Submit</button>
    </form>

    <p>First name value: {{ first.value }}</p>
    <p>First name valid: {{ first.valid }}</p>
    <p>Form value: {{ f.value | json }}</p>
    <p>Form valid: {{ f.valid }}</p>
  `,
})
export class SimpleFormComp {
  onSubmit(f: NgForm) {
    console.log(f.value);  // { first: '', last: '' }
    console.log(f.valid);  // false
  }
}

Angular ngmodel 忽略表单输入中的值属性

Angular ngmodel ignores value attribute in a form input

javascript

forms

angular

angular-forms