如何解决Formcontrol 禁用输入值预览
我做了一个步进器,我想在选择中输入一个默认值。为此,我使用了双向绑定 [(value)]
属性。它奏效了。
但是一旦我添加了 [formControl]
属性,输入值就会消失。它仍然以编程方式存在,但不再出现在下拉列表中。
这是一个步骤的例子:
<mat-step state="class" [stepControl]="firstFormControl">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Foo Label</ng-template>
<mat-form-field>
<mat-label>Foo Label</mat-label>
<mat-select [(value)]="myVar" [formControl]="firstFormControl" required>
<mat-option *ngFor="let i of customCollection" [value]="i">
{{i.name}}
</mat-option>
</mat-select>
</mat-form-field>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
这里是表单定义:
public firstFormGroup: FormGroup;
public firstFormControl: FormControl;
this.firstFormControl = new FormControl('',Validators.required);
this.firstFormGroup = this._formBuilder.group({
firstCtrl: ['',Validators.required]
});
myVar
属性中使用的 [(value)]
值完全在表单外部,仅引用 customCollection
元素之一。
知道如何解决这个问题吗?非常感谢 !凯夫
解决方法
您不需要在单个控件上同时使用模板驱动表单和响应式表单。
您可以选择退出响应式表单控件,以便您可以在组件代码中访问它。 所以删除该部分如下
<mat-select [formControl]="firstFormControl">
在您的组件中,您可以根据需要设置此控件
get myVar(): any {
return this.form.get('firstFormControl').value;
}
其中 firstFormControl
定义为在 FormGroup 对象内。例如,在 ngInit 方法中
this.form = this.formBuilder.group({'firstFormControl',['',[Validators.required]]});
,
对于那些到达那里的人。
我误用了 formcontrol 和 formGroup。
我已经删除了 firstFormControl
,而是在 mat-select 行中使用了属性 formControlName="firstCtrl"
。
我已将 [(value)]=myVar
属性删除为完全响应式形式,并停止使用模板驱动形式。
从打字稿中你可以输入一个默认值
this.firstFormGroup.get('firstCtrl').setValue( this.customCollection[2].id );
见!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。