Angular Form Control valueChanges not working

别说谁变了你拦得住时间么 提交于 2019-12-10 02:46:55

问题


I want to get one of my forms ("family") value if changed by subscribe but it seems something wrong, because I got nothing on my console's log.

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

回答1:


Use get method on form variable frm1. And use ngOnInit() instead of ngAfterViewInit()

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



回答2:


Try this:

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


来源:https://stackoverflow.com/questions/44602410/angular-form-control-valuechanges-not-working

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!