角度形式控制值變化不起作用

Question

我想獲得我的一個表格（「家庭」）的價值，如果通過訂閱改變，但它似乎有什麼錯，因爲我沒有在我的控制檯的日誌。

import { Component , AfterViewInit } from '@angular/core'; 
import {FormGroup,FormBuilder} from '@angular/forms'; 
import {Observable} from 'rxjs/Rx'; 

@Component({ 
selector: 'app-root', 
template: `<h1>Hello World!</h1> 
      <form [formGroup]="frm1"> 
      <input type="text" formControlName="name" > 
      <input type="text" formControlName="family"> 
      </form> 
      `, 

}) 

export class AppComponent implements AfterViewInit{ 

frm1 : FormGroup; 

constructor(fb:FormBuilder){ 
    this.frm1 = fb.group({ 
     name : [], 
     family: [] 
    });  
} 
ngAfterViewInit(){ 
    var search = this.frm1.controls.family; 
    search.valueChanges.subscribe(x => console.log(x));  
} 
} 

Answer 1

使用get方法上的表單變量frm1

ngOnInit(){ 
     this.frm1.get('family').valueChanges.subscribe(x => console.log(x)); 
} 

Answer 2

試試這個：

import { Component , AfterViewInit, OnInit } from '@angular/core'; 
import {FormGroup,FormBuilder} from '@angular/forms'; 
import {Observable} from 'rxjs/Rx'; 

@Component({ 
selector: 'app-root', 
template: `<h1>Hello World!</h1> 
     <form [formGroup]="frm1"> 
     <input type="text" formControlName="name" > 
     <input type="text" formControlName="family"> 
     </form>`}) 

export class AppComponent implements AfterViewInit, OnInit{ 

frm1 : FormGroup; 

constructor(private formBuilder: FormBuilder){} 

ngOnInit(): void { 
    this.formInit(); 
    this.formSet(); 
} 

formInit(): void { 
    this.frm1 = this.formBuilder.group({ 
     name: [''], 
     family[''] 
    }) 
} 

formSet(): void { 
    const editForm = { 
     name: 'test-name', 
     family: 'test familty', 
    }; 
    this.frm1.patchValue(editForm) 
} 

ngAfterViewInit(){ 
this.frm1 .controls.family.valueChanges.subscribe(
     () => { 
       console.log(this.frm1 .controls.family.value) 
      } 
     ) 
     } 
}