从FormGroup中输入FormControl订阅valueChanges

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

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

来源

2017-07-19 beachCode

我觉得你在这里缺少一些东西与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>

来源

2017-07-19 07:10:38

谢谢。我放弃了formGroup和formBuilder，并使用 – beachCode

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

HTML：

<input mdInput [formControl]="firstName">

App类：

firstName = new FormControl();

ngOnInit：

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

我的测试是目前破产n出现错误“没有NgControl的提供者”，但我将在下一步工作。更新：我只需要在TestBed中导入ReactiveFormsModule

来源

2017-07-19 09:17:39 beachCode

您在代码中缺少一些重要的东西。首先，你试图订阅的内容不存在。您没有将该字段标记为表单控件，因此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>

所以当提到使用表单控件。如果您需要初始值，请将它们设置为表单的内部版本。你在表单对象中拥有所有的值，如果你愿意，你可以访问这些值。

来源

2017-07-19 09:39:39 Alex

演示：https：//plnkr.co/edit/G3meSNQiabe1wNWgsx9E？p = preview – Alex

从FormGroup中输入FormControl订阅valueChanges

回答

相关问题