Angular ngmodel 忽略表單輸入中的值屬性

Question

我是 angular 的新手，並且，**我想要實現的是**我需要一個表單中的輸入框，該表單具有從父組件獲得的預填充值，並且我正在使用模板- 驅動形式，所以我嘗試的是

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

注意，數據是我從父組件獲得的輸入

通常，onsubmit 給出與輸入框的 name 屬性相關的輸入值，因此我可以發送到 API 但這給了我一個空白輸入框，而不是填充由 [value] 字段設置的值任何幫助是高度贊賞：D

Answer 1

你應該使用ngmodel ：

從域 model 創建 FormControl 實例並將其綁定到表單控件元素。

所以，對於你的情況（更多信息在這里）：

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

如果您想在表單中使用，可以在此處查看 angular 示例：

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
  }
}