angular-material - Angular 反应式表单验证
问题描述
我有一个包含 3 个输入的表单,其中 2 个输入是必需的,而第三个则不需要。
我的问题是,当我进入表单页面时,我看到不需要的字段处于有效状态并且已经用绿色着色,即使该字段没有变脏或触摸。
在我验证字段/表单之前,我可以做些什么来使输入变灰,或者它是否是设计使然?
这是我在组件中使用的代码:
export class SystemSettingsComponent implements OnInit {
form: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.form = new FormGroup({});
}
ngOnInit() {
this.form = this.formBuilder.group({
serviceName: ['', Validators.required],
serviceDesc: [''],
serviceId: [{value: SystemSettingsComponent.generateId(), disabled: true}, Validators.required]
});
}
static generateId() {
return Math.random().toString(36).substr(2, 9);
}}
和模板:
<form [formGroup]="form" novalidate>
<div class="row">
<div class="col-lg-4">
<mat-form-field>
<input matInput placeholder="שם השירות" formControlName="serviceName"/>
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="תיאור השירות" formControlName="serviceDesc"></textarea>
</mat-form-field>
<mat-form-field>
<input matInput class="ltr text-align-left" placeholder="מזהה שירות" formControlName="serviceId"/>
</mat-form-field>
</div>
</div>
<div>
<button mat-raised-button class="mat-raised-button mat-primary" matStepperNext>הבא</button>
</div>
解决方案
您可以监听表单的状态变化并相应地设置可选表单控件的禁用状态。就像是:
ngOnInit() {
this.form = this.formBuilder.group({
serviceName: ['', Validators.required],
serviceDesc: [{value: '', disabled: true}],
serviceId: [{value: SystemSettingsComponent.generateId(), disabled: true}, Validators.required]
});
this.form.statusChanges.subscribe(status => {
if (status === 'VALID' && this.form.controls.serviceDesc.disabled) {
this.form.controls.serviceDesc.enable();
} else if (status !== 'VALID' && this.form.controls.serviceDesc.enabled) {
this.form.controls.serviceDesc.disable();
}
});
}
推荐阅读
- postgresql - 加载到 AWS Athena 时如何使 csv 文件的第一行成为列名?
- php - 在 mac 上升级 PHP CLI 版本
- javascript - setState 没有设置状态变量 React
- reactjs - 如何使用 React Route Config 实现 Protected Route
- javascript - 如何将 PHP 嵌套数组转换为 JQuery 数组
- android - Github 上的 Maven 存储库未下载传递依赖项
- java - 如何使用 http 从服务器上的文件中将文本设置为文本视图
- angular - 如何将 json 数组值设置为角度 6 中的多个手风琴形式?
- node-red - 如何拆分和格式化 2 条消息以避免 NODE-RED 中的循环?
- python - Def 函数没有调用我创建的列表