javascript - 角度验证:在按钮单击时验证/突出显示子输入
问题描述
在这里使用 Angular 6:
我有一个父组件,其中我有一个子组件。子组件有一个文本字段。父母有一个提交按钮。
在提交单击按钮上,我想根据需要验证孩子的所有输入并相应地抛出错误。
我正在使用反应式表单,并且成功地将表单信息从父母传递给孩子。但是我不确定单击提交按钮时如何突出显示我的文本输入。
我在我的孩子身上使用了 $touched 属性,它可以工作并显示所需的错误。但我希望在用户刚刚单击按钮的情况下也显示错误。
这是一些相关的代码。
--Parent--
<form class="form-horizontal" [formGroup]="myForm" (ngSubmit)="onSubmit()">
<child [myForm]="myForm"></child>
<button type="submit">Submit</button>
</form>
<br>
Form Valid: <pre>{{myForm.valid}}</pre>
export class AppComponent {
myForm: FormGroup
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
uname: ['', Validators.required]
});
}
onSubmit() {
console.log('value: ', this.myForm.value);
console.log('the whole form and its controls: ', this.myForm)
}
}
--Child--
<div class="form-group" [formGroup]="myForm">
<label for="myForm" class="col-sm-3 control-label">Name:</label>
<div class="col-sm-8" [ngClass]="{ 'has-error': myForm.controls?.uname.errors }">
<input type="text" formControlName="uname" placeholder="Enter Name...">
<em *ngIf="myForm.hasError('required', 'uname') && myForm.controls?.uname.touched">*Required</em>
</div>
</div>
export class ChildComponent {
@Input() myForm: FormGroup;
ngOnInit() {
}
}
我还创建了一个演示来展示这个:
https://stackblitz.com/edit/angular-dbevnj
仅供参考,这只是我为展示我的问题而创建的一个示例。我将有 2-3 个子组件,每个子组件很少有表单控件。
任何输入如何解决这个问题?
解决方案
我们通过markAsTouched
在提交表单时调用所有表单控件来解决这个问题。
在您的情况下,您可以添加this.myForm.get('uname').markAsTouched();
到您的onSubmit()
方法中。
推荐阅读
- firebase - 在不知道某些子名称的情况下从 Firebase 数据库中获取所有值
- android - FusedLocationProviderClient 与以正确方式实现的 GoogleApiClient 相比是否提供了一些性能优势?
- python - 如何循环通过 Keras 拟合函数?
- nlp - 在整个语料库上训练词向量?
- orbeon - 如何从 Orbeon XForms 操作中调用 JavaScript 代码?
- git - git 创建远程分支而不破坏任何现有分支
- python - 在 raspbian OS 上的 python 3.5.3 上安装 opencv
- excel - 在 Excel 中 - 如何计算多个工作表上的多个下拉项目和数量
- ms-access - 将 MS Access 表中的值分配给变量
- vue.js - 推送路由(从 vueJS 移动到 nuxtJS)