Liaison bidirectionnelle sous formes réactives

Question

À l'aide Angulaire 2, la liaison bidirectionnelle est facile dans le modèle axé sur les formulaires, il suffit d'utiliser la boîte de banania syntaxe. Comment feriez-vous pour reproduire ce comportement dans le modèle de formulaire?

Par exemple, ici, est un standard de forme réactive. Faisons semblant de croire que c'est beaucoup plus compliqué qu'il n'y paraît, avec beaucoup, beaucoup de diverses données et la logique métier, et donc plus approprié pour une approche guidée par le modèle qu'un modèle axé sur la démarche.

export class ExampleModel {
    public name: string;
    // ... lots of other inputs
}

@Component({
    template: `
        <form [formGroup]="form">
            <input type="text" formControlName="name">
            ... lots of other inputs
        </form>

        <h4>Example values: {{example | json}}</h4>
    `
})
export class ExampleComponent {
    public form: FormGroup;
    public example: ExampleModel = new ExampleModel();

    constructor(private _fb: FormBuilder) {
        this.form = this._fb.group({
            name: [ this.example.name, Validators.required ]
            // lots of other inputs
        });
    }

    this.form.valueChanges.subscribe({
        form => {
            console.info('form values', form);
        }
    });
}

Dans l' subscribe() je peux appliquer toutes sortes de logique pour les valeurs d'un formulaire et la carte en tant que de besoin. Cependant, je ne veux pas de carte à chaque valeur d'entrée de la forme. Je veux juste voir les valeurs pour l'ensemble de l' employee modèle qu'il met à jour, dans une approche similaire à l' [(ngModel)]="example.name", et affiché dans le json tuyau dans le modèle. Comment puis-je accomplir?

Answer 1

Remarque: comme indiqué par @Clouse24, "Utilisation de Réactifs Froms avec ngModel est obsolète dans angulaire 6 et sera supprimée dans angulaire 7" (ce qui signifie que la réponse ci-dessous ne seront plus pris en charge à partir de la version 7). Veuillez lire le lien pour voir la raison de la dépréciation et de voir quelles sont les alternatives que vous aurez.

Vous pouvez utiliser [(ngModel)] avec des formes Réactives.

<form [formGroup]="form">
  <input name="first" formControlName="first" [(ngModel)]="example.first"/>
  <input name="last" formControlName="last" [(ngModel)]="example.last"/>
</form>

export class App {
  form: FormGroup;
  example = { first: '', last: '' };

  constructor(builder: FormBuilder) {
    this.form = builder.group({
      first: '',
      last: ''
    })
  }
}

Plunker

Ce sera un tout autre directive que celle qui serait utilisée sans l' formControlName. Avec des formes réactives, il sera l' FormControlNameDirective. Sans l' formControlName, l' NgModel de directive serait utilisé.

Answer 2

Parfois, vous devrez peut-être combiner [(ngModel)] avec des formulaires réactifs. Je pourrais être un contrôle d'entrée dont vous n'avez pas besoin dans le cadre du formulaire, mais vous en avez toujours besoin pour être lié au contrôleur. Ensuite, vous pouvez utiliser: [(ngModel)]="something" [ngModelOptions]="{standalone: true}"

Answer 3

Si vous souhaitez simplement afficher une valeur d'entrée, créez simplement une variable dans votre entrée et utilisez-la dans votre modèle.

... beaucoup d'autres entrées

     <h4>Example values: {{ name.value }}</h4>