Zweiseitiges Binden in reaktiven Formen

Bei Verwendung von Angular 2 ist die bidirektionale Bindung in vorlagengesteuerten Formularen einfach - Sie verwenden lediglich die Bananenbox-Syntax. Wie würden Sie dieses Verhalten in einer modellgetriebenen Form replizieren?

Hier ist zum Beispiel eine reaktive Standardform. Nehmen wir an, es ist viel komplizierter als es aussieht, mit vielen, vielen verschiedenen Eingaben und Geschäftslogik, und ist daher besser für einen modellgetriebenen Ansatz geeignet als für einen vorlagengetriebenen Ansat

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

In demsubscribe() Ich kann alle Arten von Logik auf die Formularwerte anwenden und sie nach Bedarf zuordnen. Ich möchte jedoch nicht jeden Eingabewert aus dem Formular zuordnen. Ich möchte nur die Werte für das gesamte @ sehemployee Modell, wie es aktualisiert wird, in einem Ansatz ähnlich[(ngModel)]="example.name" und wie in der JSON-Pipe in der Vorlage angezeigt. Wie kann ich das erreichen?

Antworten auf die Frage(6)

Ihre Antwort auf die Frage