web-dev-qa-db-fra.com

Liaison bidirectionnelle sur angular 6 forme réactive

J'essaie de créer une forme réactive complexe avec un composant imbriqué qui est rempli avec un objet de données.

Le comportement que j'essaie d'obtenir est très similaire à la liaison de données bidirectionnelle d'un formulaire basé sur un modèle: lorsque l'utilisateur modifie une entrée du formulaire, l'objet de données change automatiquement.

mais contrairement à la forme basée sur un modèle, je ne peux pas utiliser [(ngModel)] car il est déconseillé dans les formes réactives pour angular V6.

Je sais que fromGroup.patchValue() ne fera qu'une liaison unidirectionnelle et devra alors s'abonner manuellement pour modifier les événements et mettre à jour l'objet de données manuellement - cela entraînera beaucoup de code fatigant.

Existe-t-il une solution de contournement pour ce scénario?

angularangular6angular-reactive-formstwo-way-binding
10
Idan Abrashkin

Eh bien, si je vous comprends bien, j'ai eu un problème similaire à ce que j'ai fait (je ne sais vraiment pas si c'est la meilleure pratique) mais cela fonctionne pour moi donc dans le HTML:

<mat-form-field class="mat-container">
    <input matInput  [formControl]="generalDiscount" type="number" 
        formControlName="generalDiscount" 
        (input)="course.amounts.generalDiscount = $event.target.value" <-the workaround 
        placeholder="Discount" required="required">
</mat-form-field>

Cette entrée rend la liaison bidirectionnelle et dans votre classe .ts, vous devez mettre le même champ dans votre groupe de formulaires comme

this.amountGroup = this._formBuilder.group({

    [this.course.amounts.fitToNomberOfPeople,Validators.required],
    generalDiscount:[this.course.amounts.generalDiscount,Validators.required],

});

j'espère que cela pourra aider

5
oren