反应式双向结合
使用角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管道中。我怎样才能做到这一点？
回答 8
Stack Overflow用户
发布于 2016-11-07 06:49:41
备注：，如@Clouse24 24，https://angular.io/api/forms/FormControlName#use-with-ngmodel-is-deprecated所述(这意味着以后不再支持下面的答案)。请阅读该链接，查看反对的理由，并了解您将有哪些替代方案。
您可以将[(ngModel)]与反应性表单一起使用。
模板
<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: ""
});
}
}柱塞
这将是一个与没有formControlName的指令完全不同的指令。对于反应性表单，它将是FormControlNameDirective。如果没有formControlName，将使用NgModel指令。
Stack Overflow用户
发布于 2017-10-20 07:32:30
有时，您可能需要将(ngModel)与反应性表单结合起来。我可以是一些您不需要作为表单一部分的输入控件，但是您仍然需要将它绑定到控制器上。然后您可以使用：[(ngModel)]="something" [ngModelOptions]="{standalone: true}"
Stack Overflow用户
发布于 2019-06-19 12:35:27
下面是解决这个问题的方法：
- 快捷方式-> STACKBLITZ
为了得到two-way-binding的结果
我使用本地“模板变量”，并对两个字段使用相同的formControl。
<form [formGroup]="formGroup">
<input #myInput (input)="mySlider.value = myInput.value" type="number" formControlName="twoWayControl">
<mat-slider #mySlider (input)="myInput.value = mySlider.value" formControlName="twoWayControl" min="1" max="100">
</mat-slider>
</form>当我以编程方式想要更改模型的值时，我使用setValue()，就像其他人所宣称的那样。
setTo33() {
this.formGroup.get('twoWayControl').setValue(33);
}https://stackoverflow.com/questions/40458739
复制相似问题
腾讯云开发者
