79

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()あらゆる種類のロジックをフォーム値に適用し、必要に応じてマップできます。ただし、フォームからのすべての入力値をマップしたくありません。と同様のアプローチで、テンプレートの json パイプに表示されるemployeeように、更新されるモデル全体の値を確認したいだけです。[(ngModel)]="example.name"どうすればこれを達成できますか?

4

8 に答える 8

0

ngModel または Template 駆動型フォームとリアクティブ フォーム (モデル駆動型フォーム) を混在させることができます。たとえば、TDF を使用すると、サブスクリプションなしでデータを簡単に読み取ることができます。一方、MDF を使用すると、いくつかの検証を提供できます。しかし、私はそれらの 1 つだけを選択したいと思います。

TDF の最大の欠点は、単体テストを適用できないことと、TDF を使用するとテンプレートが非常に汚れることです。

于 2019-11-25T16:24:39.773 に答える