首页 文章

以反应形式进行双向绑定

提问于
浏览 次
24

使用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管道中 . 我怎么能做到这一点？

angular angular2-forms angular2-formbuilder

3 回答

  • 37

    注意：正如@ Clouse24所述，“在角度6中使用带有ngModel的Reactive Froms并将在角度7中删除”（这意味着从版本7开始将不再支持下面的答案） . 请阅读链接以查看弃用的原因并了解您将拥有的替代方案 .

    您可以将 [(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 指令 .

    回复于
  • 8

    有时您可能需要将[（ngModel）]与Reactive表单相结合 . 我可能是一些你不需要作为表单一部分的输入控件，但你仍然需要将它绑定到控制器 . 然后你可以使用： [(ngModel)]="something" [ngModelOptions]="{standalone: true}"

    回复于
  • 0

    如果您只想显示输入值，只需在输入中创建一个变量并在模板中使用 .
    ...许多其他输入

    <h4>Example values: {{ name.value }}</h4>
    回复于

相关问题