angular - Angular 8如何跳过不可见文本框的验证
问题描述
<form [formGroup]="userForm" >
<div class="form-group" *ngIf="isHidden">
<label for="firstName">First Name</label>
<input class="form-control" name="firstName" id="firstName" type="text" formControlName="firstName">
</div>
<button type="submit" class="btn btn-default" [disabled]="!userForm.valid">Submit</button>
</form>
import { Component } from '@angular/core';
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
isHidden:boolean=false;
title = 'Children';
userForm: FormGroup;
user: any = {
firstName: ''
};
constructor(private formBuilder: FormBuilder) {
this.userForm = this.formBuilder.group({
'firstName': [this.user.firstName, [Validators.required]]
});
}
}
我正在实现反应式表单角度验证如果我隐藏文本框,那么如何跳过对表单中不可见的特定文本框的验证
如果我的文本框可见我的验证应该工作
表示如果 isHidden=true 验证不应该工作 如果 ishidden =false 验证应该工作
解决方案
您可以创建一个函数来添加/删除验证器:
checkValidator() {
const firstNameControl = this.userForm.controls["firstName"];
if (this.isHidden) {
firstNameControl.clearValidators();
} else {
firstNameControl.setValidators([Validators.required]);
}
firstNameControl.updateValueAndValidity();
}
推荐阅读
- java - 如何在maven中做多个生成源代码的主类
- python - 在不更改python中的数字的情况下将变量的类型从十六进制字符串转换为uint_32
- css - 仅使用 Typescript 编译 css 文件
- nginx - 如何配置 nginx 以尾登录 Web 浏览器
- angular - 无法将 Web API 核心与 Angular 结合起来
- angular - 即使我从 Material Angular 完全复制它,dataSource 也没有显示
我知道我的问题很奇怪,但我的问题正是标题所说的。
mat-table dataSource
即使我已经尝试使用,我也没有显示任何数据console.log("My Data : ", this.dataSaource)
。不仅如此,我的控制台很干净,没有任何错误。这是我第一次使用php - Laravel 循环过滤 uuid 字符
- javascript - 如何从状态数组创建下拉列表?
- angular - 使用 *ngFor 处理奇数项
- reactjs - 反应组件内的导出功能或组件外同一文件中的访问状态