angular - react 形式的两种方式绑定(bind)

Question

使用 Angular 2，双向绑定(bind)在模板驱动的表单中很容易——您只需使用香蕉盒语法。您将如何以模型驱动的形式复制此行为？

例如，这是一个标准的 react 形式。让我们假设它比看起来复杂得多，有很多很多不同的输入和业务逻辑，因此比模板驱动方法更适合模型驱动方法。

    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 管道中。我怎样才能做到这一点？

Answer 1

Note: as mentioned by @Clouse24, "Using Reactive Froms with ngModel is deprecated in angular 6 and will be removed in a future version of Angular" (which means that the answer below will no longer be supported in the future). Please read the link to see the reasoning for deprecation and to see what alternatives you will have.

您可以将 [(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: ""
    });
  }
}

Plunker

这将是一个与没有 formControlName 时使用的指令完全不同的指令。对于响应式表单，它将是 FormControlNameDirective。如果没有 formControlName，将使用 NgModel 指令。