angular - 如何使用响应式表单将验证器添加到表单控件以从角度材料进行匹配输入
问题描述
我正在从 Angular 5 迁移到 Angular 7,我发现在 Angular6 中不推荐使用 ngmodel 和 formcontrolName 在同一个元素中并在 7 中删除。现在我无法将验证器设置为来自 angular 材料的 mat-chip 输入
html:
<div class="form-group col-md-6">
<label class="required"> User Names
</label>
<mat-form-field >
<mat-chip-list class="form-control form-control-sm"
[ngClass]="{'is-invalid':form.controls.names.invalid && (form.controls.names.touched || form.controls.names.dirty) }"
#chipList3>
<mat-chip *ngFor="let local of form.get('names').value" [removable]="removable"
(remove)="remove_names(local)">
{{local}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input [matChipInputFor]="chipList3"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add_names($event)" />
</mat-chip-list>
</mat-form-field>
</div>
在迁移到 Angular 7 之前,我会像这样在输入标签中使用 formControlName
<div class="form-group col-md-6">
<label class="required"> User Names
</label>
<mat-form-field >
<mat-chip-list class="form-control form-control-sm"
[ngClass]="{'is-invalid':form.controls.names.invalid && (form.controls.names.touched || form.controls.names.dirty) }"
#chipList3>
<mat-chip *ngFor="let local of user.names" [removable]="removable"
(remove)="remove_names(local)">
{{local}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input [matChipInputFor]="chipList3"
formControlName="names"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add_names($event)" />
</mat-chip-list>
</mat-form-field>
</div>
当用户将名称推送到列表中时,我会执行所有自定义验证,但我想检查它是否存在,因为我使用 Validators.required 但现在因为我使用 formcontrol 值本身来显示列表,所以我不能给出任何引用模板中的formControlName
TS:
user :FormGroup =this.fb.group({
names:[[], [Validators.required]],
id:0
});
现在,即使 formControl 中有值,它也不满足 Validators.required
在花时间研究之后,我发现添加这个
this.form.controls['names'].updateValueAndValidity()
满意 Validators.required 但现在我收到此错误
Error: No value accessor for form control with name: 'names'
解决方案
我知道你的问题是关于角度材料的,但你可以简单地用我的代码替换,但这是通过反应式表单技术和引导程序 4 验证表单控制输入字段以显示验证的最佳方式。首先,您需要为您的表单编写一些代码:在 html 部分:
<form [formGroup]="myForm">
<div class="form-group">
<label for="name">first Name: </label>
<input type="text" class="form-control" formControlName="firstName" id="name">
<div *ngIf="firstName.touched && firstName.invalid" class="alert alert-danger">
<div *ngIf="firstName.errors.required">filling name is required!</div>
</div>
</div>
</form>
在 ts 文件中,您应该实现进行验证的逻辑。
在 ts 文件中:
myForm = new FormGroup({
'firstName':new FormControl('',Validators.required)
})
//getter method
get firstName(){
this.myForm.get('firstName');
}
现在您可以看到验证正在运行。现在要为输入字段提供样式以在无效输入周围显示红色边框,只需转到组件的 css 文件并将此类添加到 css 文件中:
/// invalid
.form-control.ng-touched.ng-invalid{border:2px solid red;}
///valid
.form-control.ng-touched.ng-invalid{border:2px solid green;}
使用这种技术不需要您使用 ng 类。
推荐阅读
- gitops - GitOps 和数据库迁移
- tableau-api - 带有日期范围的 Tableau 热图
- ruby-on-rails - 如何将 view_context 传递给 ActiveJob 后台工作人员?
- html - 获取输入单选按钮的值并将标签值作为对象分开?
- speech-recognition - com.google.api.gax.rpc.UnavailableException:io.grpc.StatusRuntimeException:UNAVAILABLE:凭据无法获取元数据:云语音
- image - 我没有从 PIL 打印图像,但我从 matplotlib 获得了它,为什么?
- python - 加快 pandas 迭代,以测试后续元素的条件
- solr - 如何使用 dataimporthandler 将 csv 文件导入 solr
- ios - 为 TestFlight 发布 iOS 应用程序后 React Native 进行更改和更新
- jenkins-pipeline - 来自 SCM 的 Jenkins Pipeline 脚本与脚本内部的 Sync 共享 Perforce 工作区(不同的流/库)