Liaison bidirectionnelle dans des formes réactives

À 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 le subscribe() que 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 des employee modèle qu'il met à jour, dans une approche similaire à [(ngModel)]="example.name"et affiché dans le json tuyau dans le modèle. Comment puis-je y arriver?

source d'informationauteur ebakunin

  1. 28

    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 complètement différent de la directive que celle qui serait utilisée sans la formControlName. Avec des formes réactives, ce sera la FormControlNameDirective. Sans le formControlNamele NgModel directive serait utilisé.

  2. 2

    Parfois, vous pourriez avoir besoin de combiner [(ngModel)] avec des formes Réactives. J'ai peut être quelques inputcontrol que vous n'avez pas besoin, comme une partie de la forme, mais vous avez encore besoin d'être relié au contrôleur. Ensuite, vous pouvez utiliser: [(ngModel)]="something" [ngModelOptions]="{standalone: true}"