从FormGroup中的输入FormControl订阅valueChanges

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 = '';

上 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

我放弃了 FormGroup 和 FormBuilder 而只是使用了

HTML：

<input mdInput [formControl]="firstName"> 

应用类：

firstName = new FormControl();

ngOnInit：

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

我的测试目前因错误“No provider for NgControl”而中断，但接下来我会继续努力。更新：我只需要在 TestBed 中导入 ReactiveFormsModule

Answer 3

您在代码中缺少一些重要的东西.首先,您尝试订阅的内容不存在.您尚未将该字段标记为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>

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