反应形式的双向绑定 [英] Two way binding in reactive forms

问题描述

使用 Angular 2，在模板驱动的表单中很容易进行双向绑定——你只需要使用香蕉盒语法.您将如何以模型驱动的形式复制这种行为?

Using Angular 2, two-way binding is easy in template-driven forms - you just use the banana box syntax. How would you replicate this behavior in a model-driven form?

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

For example, here is a standard reactive form. Let's pretend it's much more complicated than it looks, with lots and lots of various inputs and business logic, and therefore more appropriate for a model-driven approach than a template-driven approach.

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

In the subscribe() I can apply all sorts of logic to the form values and map them as necessary. However, I don't want to map every input value from the form. I just want to see the values for the entire employee model as it updates, in a approach similar to [(ngModel)]="example.name", and as displayed in the json pipe in the template. How can I accomplish this?

推荐答案

注意:如@Clouse24、"在 angular 6 中不推荐使用 Reactive Froms 和 ngModel，并将在未来版本中删除Angular"(这意味着以后将不再支持下面的答案).请阅读链接以了解弃用的原因并了解您将拥有哪些替代方案.

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)].

You can use [(ngModel)] with Reactive forms.

模板

<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 指令.

This will a completely different directive than the one that would be used without the formControlName. With reactive forms, it will be the FormControlNameDirective. Without the formControlName, the NgModel directive would be used.

这篇关于反应形式的双向绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！