Manière correcte de s'abonner à valueChanges Angulaire 2

J'ai été bidouiller avec des formes réactives et valueChanges abonnement Angulaire 2. Je ne t très bien pourquoi certaine forme de souscrire semblent ne pas être autorisé.

this.form.get('name').valueChanges /* <- doesn't work */
  .do(changes => {
    console.log('name has changed:', changes)
    });
  .subscribe();

this.form.get('title').valueChanges.subscribe( /* <- does work */
  changes => console.log('title has changed:', changes)
);

Cette plunker reproduit le problème (ouvert DevTools console pour voir le message d'erreur):

ZoneAwareError {pile: "Erreur: Uncaught (promesse): TypeError: Cannot se...g.com/[email protected]/dist/zone.js:349:25) []", un message: "Uncaught (promesse): TypeError: Cannot set ina...de minerai.umd.js:8486:93)↵ au Tableau.forEach (native)", originalStack: "Erreur: Uncaught (promesse): TypeError: Cannot se...ps://unpkg.com/[email protected]/dist/zone.js:349:25)", zoneAwareStack: "Erreur: Uncaught (promesse): TypeError: Cannot se...g.com/[email protected]/dist/zone.js:349:25) []", nom: "Erreur"...}

Est le premier modèle (avec do) n'est pas illégale en effet?

Pourquoi do être illégal? Vous n'avez pas besoin, vous pouvez passer le rappel à subscribe(...) à la place. Le Plunker ne fonctionne pas pour moi (je ne sais pas pourquoi, ont depuis un certain temps et, par conséquent, ne peut pas étudier)
C'est exactement ce qui m'intrigue, c': pourquoi serait-il illégal? Le Plunkr n'est pas toujours comme moi soit - je mets à jour mon post avec l'erreur de la DevTools.
Votre Plunker avez manqué l'importation du do de l'opérateur. Voir aussi stackoverflow.com/questions/34515173/...
Une sorte de bon point, l'ajout de import 'rxjs/add/operator/do'; n'a pas aider à bien.
Difficile à dire, je ne sais pas comment déboguer avec Plunker pas de travail. Je ne suis pas à l'aide de la Machine a ecrire sur ma machine. Peut-être quelqu'un d'autre a une idée.

OriginalL'auteur user776686 | 2017-01-16

  1. 2

    Ce fait votre plunker de travail:

    1. ajouter cette instruction d'importation dans l'app.ts
      import 'rxjs/add/operator/do';
    1. Supprimer le point-virgule après .énoncé

    .n'(changements => {
    console.journal (le nom a changé:', modifications)
    })

    Complète changé app.ts 

    import {Component, NgModule, OnInit} from '@angular/core'
import {BrowserModule } from '@angular/platform-browser'
import { FormGroup, FormBuilder, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/do';

@Component({
  selector: 'my-app',
  template: `
    <form novalidate [formGroup]="form">
      <div>
        <select type="text" class="form-control" name="title" formControlName="title">
          <option *ngFor="let title of titles" value="{{title}}">{{title}}</option>
        </select>
      </div>
      <div>
        <input type="text" class="form-control" name="name" formControlName="name">
      </div>
      <fieldset formGroupName="address">
        <legend>Address</legend>
        <input type="text" class="form-control" name="street" formControlName="street">
        <input type="text" class="form-control" name="city" formControlName="city">
      </fieldset>
    </form>
  `,
})
export class App implements OnInit {
  private form: FormGroup;
  private titles: string[] =  ['Mr', 'Mrs', 'Ms'];

  constructor(private fb: FormBuilder){

  }
  ngOnInit() {
    this.form = this.fb.group({
      title: 'Mr',
      name: '',
      address: this.fb.group({
        street: '',
        city: ''
      })
    });

    this.form.get('name').valueChanges
      .do(changes => {
        console.log('name has changed:', changes)
        })
      .subscribe();

    this.form.get('title').valueChanges.subscribe(
      changes => console.log('title has changed:', changes)
    );

    this.form.get('address').valueChanges.subscribe(
      changes => console.log('address has changed:', changes)
    );  
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule, ReactiveFormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

    Une autre solution serait d'utiliser le "ngModelChange" événement

    Changement dans votre modèle:

     <input type="text" class="form-control" (ngModelChange)="doNameChange($event)" name="name" formControlName="name">

    Dans votre composant vous gérer ensuite votre événement de changement:

    doNameChange(event: any){
   alert("change")
}
    Merci, mais comme vous le voyez, je ne connais qu'une façon de travailler pour gérer les changements. La question est plutôt pourquoi un légitime motif ne semble pas fonctionner.
    pourquoi voulez-vous utiliser le "faire" ? Si vous déplacez la fonctionnalité de "faire" pour s'abonner bloc, il est de travail
    votre modèle est pas mal la syntaxe est la suivante.
    Je seconde, vous avez un point-virgule dans le milieu de votre observables de la chaîne entre do() et abonnez-vous(). C'est un code d'erreur de syntaxe.

    OriginalL'auteur Karl

  2. 2

    un de la manière est:

    debounceTime fera abonnement après avoir donné quelques millisecondes. Si besoin est,de les ignorer.

    distinctUntilChanged force abonnement uniquement sur la valeur réelle de changement.

     this.form.controls['form_control_name']
            .valueChanges
            .debounceTime(MilliSeconds)
            .distinctUntilChanged()
            .subscribe(val => {

              });

    OriginalL'auteur Nabin Kumar Khatiwada

  3. 0

    J'ai également eu des problèmes avec cela.

    Je voulais faire debounceTime dans mon cas, si elle ne résout pas à mes besoins.

    J'ai effectivement oublié de vous abonner!

    Mais j'ai été en mesure d'obtenir les changements de la valeur d'activation de cette façon:

    this.form.get('name').valueChanges.forEach(
    (value) => {console.log(value);} )

    Origine à partir d'ici, à l'angle de docs: héros-détail-composant.ts

    OriginalL'auteur JGFMK