从 FormGroup 中的输入 FormControl 订阅 valueChanges答案

【问题标题】：subscribe to valueChanges from input FormControl in FormGroup从 FormGroup 中的输入 FormControl 订阅 valueChanges
【发布时间】：2017-07-19 01:06:01
【问题描述】：

在 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)
});

这是一个模板 sn-p。

<form #myForm="ngForm">

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

{{ myForm.value | json }}

【问题讨论】：

标签： angular

【解决方案1】：

我认为你在formGroup 和formControlName 中遗漏了一些你应该做的事情：

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

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

【讨论】：

谢谢。我放弃了 formGroup 和 formBuilder，只使用了

【解决方案2】：

您的代码中遗漏了一些关键的东西。首先，您要订阅的内容不存在。您还没有将该字段标记为表单控件，因此 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>

如前所述，使用表单控件。如果您需要初始值，请在表单的构建中设置它们。您的表单对象中包含所有值，如果您愿意，可以访问这些值。

【讨论】：

【解决方案3】：

我放弃了FormGroup和FormBuilder，只用了

HTML：

<input mdInput [formControl]="firstName">

应用类：

firstName = new FormControl();

ngOnInit：

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

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

【讨论】：