Question

在Angular 4中，我正在尝试订阅FormControl的valueChanges。以下两个版本都没有工作。我没有看到任何错误。 form.value JSON在我键入时更新，但订阅不起作用。

myForm: FormGroup;
public firstName = new FormControl();
public lastName = new FormControl();

this.myForm = this.formBuilder.group({ 
      firstName: '',
      lastName: '',
});

this.myForm.controls.firstName.valueChanges.subscribe(value => {
      console.log(value);
});


this.myForm.get('firstName').valueChanges.subscribe(value => {
      console.log('name has changed:', value)
});

这是一个模板代码段。

<form #myForm="ngForm">

<md-input-container>
    <input mdInput name="firstName" [(ngModel)]="firstName" placeholder="enter name"/>
</md-input-container>

{{ myForm.value | json }}

Answer 1

我认为你错过了formGroup和formControlName应该做的事情：

myForm: FormGroup;
firstName = '';
lastName = '';

on ngOnInit

this.myForm = this.formBuilder.group({
    firstName: [this.firstName],
    lastName: [this.lastName]
});

this.myForm.controls['firstName'].valueChanges.subscribe(value => {
  console.log(value);
});

和HTML

<form [formGroup]="myForm">
   ...

  <input name="firstName" [(ngModel)]="firstName" formControlName="firstName" placeholder="enter name"/>


  <input name="lastName" [(ngModel)]="lastName" formControlName="lastName" placeholder="enter last name"/>

   ...
</form>

Answer 2

您在代码中遗漏了一些重要的事情。首先，您尝试订阅的内容不存在。您尚未将该字段标记为formcontrol，因此Angular不知道订阅该字段。您需要标记formControlName="firstname"以让Angular知道它是一个表单控件。

您还缺少将表单标记为表单组，它应该是：

<form [formGroup]="myForm">

不鼓励在表单中使用ngModel，ngModel指令甚至不包含在ReactiveFormsModule中。我还注意到，当与反应形式一起使用时，它经常会引起问题。你有表单控件替换ngModel的使用，所以删除它并使用表单控件，因为它们已经到位！：）

然后我不使用valueChanges而是在模板中使用一些更改事件，但这取决于您。

因此，表单的构建应如下所示：

this.myForm = this.formBuilder.group({
  firstname: [''],
  lastname: ['']
})
// I like to use variables
this.firstNameCtrl = this.myForm.get('firstname')

// as mentioned, like to use change event:
logValue(value) {
  console.log(value)
}

模板看起来像这样：

<form [formGroup]="myForm">
  <md-input-container>
    <input mdInput formControlName="firstname" 
         (keyup)="logValue(firstNameCtrl.value)" />
  </md-input-container>  
  <md-input-container>
    <input mdInput formControlName="lastname"/>
  </md-input-container>   
</form>

如上所述使用表单控件。如果需要初始值，请在表单的构建中设置它们。您拥有表单对象中的所有值，并且可以根据需要访问这些值。

Answer 3

我放弃了FormGroup和FormBuilder，只使用了

HTML：

<input mdInput [formControl]="firstName">

App类：

firstName = new FormControl();

ngOnInit：

this.firstName.valueChanges.subscribe(value => {
     console.log('name has changed:', value)
});

我的测试目前因错误“没有NgControl的提供者”而被打破，但我接下来会继续处理。更新：我只需要在TestBed中导入ReactiveFormsModule

从FormGroup中的输入FormControl订阅valueChanges

3 个答案: