Forme angulaire de Contrôle valueChanges ne fonctionne pas

Je veux obtenir l'un de mes formulaires ("famille") de la valeur en cas de changement par abonnez-vous, mais il semble quelque chose de mal, parce que je n'ai rien sur ma console de 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));    
}
}
  • Pourquoi ne pas utiliser un change() gestionnaire d'événement dans votre code HTML du champs de saisie ?
InformationsquelleAutor M.J | 2017-06-17
  1. 4

    Utilisation get méthode sur la variable de formulaire frm1. Et l'utilisation ngOnInit() au lieu de ngAfterViewInit() 

    ngOnInit() {  
   this.frm1.get('family').valueChanges.subscribe( x => console.log(x));
}
    • Je l'ai fait mais toujours rien sur ma console quand j'ai de la valeur d'entrée!!!
    • Placez le code dans ngOnInit() et d'essayer. Il n'y a pas de raison de le faire dans ngAfterViewInit()
    • merci maintenant son travail, je peux savoir pourquoi AfterViewInit eu de problème!!
    • C'était une solution de contournement que j'ai proposé, il n'y a pas de raison de regarder de contrôle de formulaire dansAfterViewInit, puisque vous travaillez sur le modèle des formulaires et vous avez tous la forme de contrôle dans les noms de lieu. Donc idéal serait onInit().
    InformationsquelleAutor Amit Chigadani
  2. 2

    Essayez ceci:

    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)
             }
        )
      }
}
    • n'ai rien sur la console!!!!
    • je l'ai testé dans mon projet: il fonctionne: quelle erreur vous arriver
    • j'ai mis à jour la réponse. essayez ceci. Testé
    • mais je suis à la recherche d'un moyen avec moins de code !!!
    • vous devez disposer de fonctions de la forme d'initialisation et d'ensemble. otherthan cette. vous pouvez utiliser .méthode next() pour détecter les changements
    • j'ai pensé: vous nedd pour modifier le formulaire après l', c'est pourquoi suggèrent forme d'initialisation et d'ensemble

    InformationsquelleAutor Ketan Akbari