Question

我在应用程序中使用了反应形式。我正在使用插值将值分配给输入字段。

提交表单后，不会获取使用插值分配给输入字段的值。有人可以告诉我我在做什么错吗？

main.component.html

<form  [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
<div class="form-group">
<label>Name</label>
<input value={{item}} type="text" class="form-control"
formControlName="Item">
</div> 
<button type="submit"> Next </button> </form>

main.component.ts

export class MainComponent implements OnInit {

form: FormGroup;

constructor() {
this.form = new FormGroup({
Item: new FormControl('', Validators.required)
})}

onSubmit(value){
console.log(value);
}

Answer 1

尝试：

<input value="{{item}}" type="text" class="form-control"
formControlName="Item">

Answer 2

使用反应式表单，您无需设置value="{{ item }}"。

但是在何处定义item变量？

您可以这样做：

<form
  [formGroup]="form"
  (ngSubmit)="onSubmit(form.value)">
  <div class="form-group">
   <label>Name</label>
   <input
     type="text"
     class="form-control"
     formControlName="Item">
  </div> 
  <button type="submit">Next</button>
</form>

Answer 3

在我看来，Reactive Forms的工作方式有些混乱。

使用反应式表单，真理的源头已经在组件中，模型中而不是模板中。因此，只要控件发生更改，它就会以同步方式反映在模型中。

您的模板不应只需要

 <form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control"
formControlName="item">
</div> 
<button type="submit"> Next </button> </form>

然后在组件中

export class MainComponent implements OnInit {

form: FormGroup;

constructor() {
this.form = new FormGroup({
item: new FormControl('', Validators.required)
})}

onSubmit(){
console.log(this.form.value);
}

我摆脱了不需要的插值和form在Submit函数上的不必要传递。另外，我将控件名称重命名为item，因为小写字母只能在Objects中使用，而classes可以像foreach (string line in lines) { string newLine = line.Replace(word, ""); far.WriteLine(newLine); }这样使用。

看看Reactive Forms documentation ，以更好地了解它们的工作原理

未获取反应形式的输入值（Angular5）

3 个答案: