從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

回答

相關問題