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

Question

我对角度有点陌生，**我想实现的是**我需要一个预先填充值的表单中的输入框，我从父组件获得的值，我正在使用模板驱动的表单，所以我尝试的是

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

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

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

Answer 1

你应该使用 ngmodel：

从域模型创建 FormControl 实例，并将其绑定到窗体控件元素。

因此，对于您的情况(更多信息在这里(：

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

如果你想在表单中使用，你可以在这里检查角度示例：

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