abonnez-vous à valueChanges de l'entrée FormControl dans FormGroup

Angulaire 4, je suis en train de vous abonner à la valueChanges d'un FormControl. Aucune des versions ci-dessous est de travail. Je ne vois pas toutes les erreurs. Le formulaire.la valeur JSON est mise à jour comme je le type, mais l'abonnement n'est pas de travail. 

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

Voici un modèle extrait.

<form #myForm="ngForm">

<md-input-container>
    <input mdInput name="firstName" [(ngModel)]="firstName" placeholder="enter name"/>
</md-input-container>

{{ myForm.valeur | json }}
InformationsquelleAutor beachCode | 2017-07-19
  1. 23

    Je pense qu'il vous manque quelque chose ici avec formGroup et formControlName que vous devez faire:

    myForm: FormGroup;
firstName = '';
lastName = '';

    sur ngOnInit

    this.myForm = this.formBuilder.group({
    firstName: [this.firstName],
    lastName: [this.lastName]
});

this.myForm.controls['firstName'].valueChanges.subscribe(value => {
  console.log(value);
});

    et Dans 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>
    • merci. J'ai renoncé à formGroup et formBuilder et juste utilisé <input mdInput [formControl]="prenom">
    InformationsquelleAutor Touqeer Shafi
  2. 10

    Il vous manque quelques choses essentielles dans votre code. Tout d'abord, ce que vous essayez de vous abonner, n'existe pas. Vous n'avez pas marqué ce champ doit être formcontrol, donc Angulaire ne sait pas à vous y inscrire. Vous devez marquer formControlName="firstname" laisser Angulaire sais que c'est une forme de contrôle.

    Aussi, vous êtes absence de marquage de votre forme comme une forme de groupe, il convient de:

    <form [formGroup]="myForm">

    À l'aide de ngModel dans les formulaires est découragé, le ngModel directive n'est même pas inclus dans ReactiveFormsModule. J'ai aussi remarqué qu'il provoque souvent des problèmes lorsqu'ils sont utilisés conjointement avec des formes réactives. Vous avez la forme des contrôles afin de remplacer l'utilisation de ngModel, afin de le déposer et utiliser les contrôles de formulaire, car ils sont déjà en place! 🙂

    Alors je serais à la place de l'aide valueChanges, utilisez simplement un événement de changement de place dans le modèle, mais c'est à vous.

    Ainsi, l'accumulation de la forme devrait ressembler à ceci:

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

    Le modèle ressemblerait alors à ceci:

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

    Donc, comme mentionné utiliser les contrôles de formulaire. Si vous avez besoin d'une valeur initiale, dans la construction de la forme. Vous avez toutes les valeurs dans votre objet de formulaire et vous pouvez y accéder si vous le souhaitez.

    InformationsquelleAutor AJT_82
  3. 2

    J'ai renoncé à FormGroup et FormBuilder et juste utilisé

    HTML:

    <input mdInput [formControl]="firstName">

    La classe App:

    firstName = new FormControl();

    ngOnInit:

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

    Mon test est actuellement en rupture avec le message d'erreur "Pas de fournisseur pour NgControl" mais je vais travailler sur la prochaine.
    Mise à jour: j'ai juste besoin d'importer des ReactiveFormsModule au Banc d'essai

    InformationsquelleAutor beachCode