反応型での二方向性結合

質問

Angular 2を使えば、テンプレート駆動型フォームで双方向バインディングは簡単です。バナナボックス構文を使うだけです。この動作をモデル駆動型フォームでどのように再現するのでしょうか？

例えば、ここに標準的なリアクティブフォームがあります。見た目よりもずっと複雑で、さまざまな入力やビジネスロジックがたくさんあり、テンプレート駆動型アプローチよりもモデル駆動型アプローチに適していると仮定してみましょう。

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

の中で subscribe() フォームの値に対してあらゆる種類のロジックを適用し、必要に応じてマッピングすることができますね。しかし、フォームからのすべての入力値をマッピングしたいわけではありません。私はただ、全体の employee モデル全体の値を見たいだけなのです。 [(ngModel)]="example.name" と同じようなアプローチで、テンプレート内のjsonパイプに表示されるようにします。どうすればこれを実現できるでしょうか？

どのように解決するのですか？

注意してください。 で述べたように クラウス24 , "ngModelでReactive Fromsを使用することはangular 6で非推奨であり、angularの将来のバージョンで削除されます"。 (という記述があります（つまり、以下の回答は将来的にサポートされなくなるということです）。非推奨の理由を見るためにリンクを読み、どのような代替手段があるのかを確認してください。

を使用することができます。 [(ngModel)] を Reactive フォームで使用することができます。

テンプレート

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

プランカー

とは全く別のディレクティブになります。 を使わずに は formControlName . リアクティブフォームでは、これは FormControlNameDirective . がない場合は formControlName がなければ NgModel ディレクティブが使われるでしょう。