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

问题描述

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

例如，这是标准的反应形式。我们假装它比看起来要复杂得多，有很多各种各样的输入和业务逻辑，因此比模板驱动的方法更适合于模型驱动的方法。

 导出类ExampleModel {
公共名称：字符串； 
 // ... ...许多其他输入
} 
 
 @Component（{
模板：`
< form [formGroup] = form > 
<输入类型= text formControlName = name> 
 ...很多其他输入
< / form> 
 
 < h4>示例值：{{example | json}}< / h4> 
`
}）
导出类ExampleComponent {
公共形式：FormGroup; 
公共示例：ExampleModel = new ExampleModel（）; 
 
构造函数（私有_fb：FormBuilder）{
 this.form = this._fb.group（{
 name：[this.example.name，Validators.required] 
 //其他大量输入
}）； 
} 
 
 this.form.valueChanges.subscribe（{
 form => {
 console.info（'form values'，form）; 
} 
}）； 
} 
  

在 subscribe（）我可以将各种逻辑应用于表单值并根据需要映射它们。但是，我不想映射表单中的每个输入值。我只想查看整个员工模型在更新时的值，采用类似于 [（ngModel）] = example.name的方法 ，并显示在模板的json管道中。我该如何完成？

解决方案

注意： @ Clouse24 ， 在Angular 6中弃用ngModel使用反应性发件人，并且将在Angular的未来版本中将其删除 （这意味着以下答案将不再受支持）。请阅读链接以了解弃用的原因，并了解您将拥有哪些替代方法。

您可以使用 [（ngModel）] 具有反应形式。

模板

 < form [formGroup] = form> 
< input name = first formControlName = first [（ngModel）] = example.first /> 
< input name = last formControlName = last [（ngModel）] = example.last /> 
< / form> 
  

组件

< pre class = lang-js prettyprint-override> export class App {
form：FormGroup;
example = {first：，last：};

构造函数（生成器：FormBuilder）{
this.form = builder.group（{
first：，
last：
} ）;
}
}


柱塞

这将是一个完全不同的指令比不使用 formControlName 的那一种。对于反应形式，它将是 FormControlNameDirective 。如果没有 formControlName ，将使用 NgModel 指令。

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

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?

解决方案

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.

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

template

<form [formGroup]="form">
  <input name="first" formControlName="first" [(ngModel)]="example.first"/>
  <input name="last" formControlName="last" [(ngModel)]="example.last"/>
</form>

component

export class App {
  form: FormGroup;
  example = { first: "", last: "" };

  constructor(builder: FormBuilder) {
    this.form = builder.group({
      first: "",
      last: ""
    });
  }
}

Plunker

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屋！