angular - 在Angular 5中手动设置值后验证反应表单?
问题描述
当某些事件发生时,我正在手动设置一个反应式表单。它们已更新,尽管它们没有通过任何类型的验证。
会是这样的
this.FORM.controls.WHATEVERINPUT.setValue(X);
关键是我使用的是 Material Design 和 Angular 5,所以在模板中我有这个结构
<mat-form-field>
<input matInput formControlName="WHATEVERINPUT">
<mat-error *ngIf="FORM?.controls.WHATEVERINPUT.errors">
... is required & Minimum of 5 characters
</mat-error>
</mat-form-field>
除了我之前提到的那些值之外,它工作得很好。
我已经在控制器中玩了一点
this.FORM.controls.WHATEVERINPUT.markAsTouched();
this.FORM.controls.WHATEVERINPUT.markAsDirty();
this.FORM.updateValueAndValidity();
以多种方式,但我还没有得到验证的价值
如果有人能以任何方式帮助我,我将不胜感激谢谢
解决方案
编辑:简单的答案
您可以this.form.get('username').markAsTouched();
在设置值后调用。
另一个答案
如果您将按钮放在表单中,将一个(ngSubmit)="USR($event)"
作为属性添加到您的表单标签中,然后type="submit"
在您的按钮上添加,您将使 Angular 检测表单是否有效,然后将显示错误消息。
<form class="example-form" [formGroup]="form" (ngSubmit)=USR($event)>
<mat-form-field class="example-full-width">
<input matInput placeholder="Username" formControlName="username">
</mat-form-field>
<mat-form-field class="example-full-width">
<input matInput placeholder="Password" formControlName="password">
</mat-form-field>
<button mat-raised-button type="button" color="primary" [style.margin]="'12px'" (click)="PWD()">Update password with value</button>
<button type="submit" mat-raised-button color="primary" [style.margin]="'12px'">Update username required error</button>
</form>
推荐阅读
- android - recyclerView(仍然)不显示片段上的项目
- python - Python - 具有 NaN 值的列表的 min() max()
- microsoft-graph-api - 用于主权网络的 OneNote API
- sql - oracle如何使用sql获取一对多关系的数据?
- docker - WSL docker 最新更新后突然出现“Operation not allowed”(Docker Engine v19.03.5)
- php - PHP / PDO多个文件上传然后将文件名存储在mysql中的数组中
- apache-kafka - Kafka 确认与 Kafka 提交
- arrays - 将购物车中的物品分开到不同的结账导轨中
- python - 如何从网站上的最后一个表中抓取数据
- blueprism - 将本地机器中的 Blue Prism 连接到不同机器中的 Blue Prism 应用服务器