目标:使单选按钮成为必需。
问题:元素mat-error及其内容在未提交表单的情况下立即显示。元素mat-error及其内容应仅在用户尝试提交表单时显示。
我试着添加触摸标准,但我不能让它工作!
欢迎提出任何建议!
超文本:
<div class="mat-radio-group">
<label class="label-mat-radio-group margin-space">Channel visibility</label>
<mat-radio-group formControlName="visibility" aria-label="Select an option">
<mat-radio-button value="public">Public</mat-radio-button>
<mat-radio-button value="private">Private</mat-radio-button>
<!-- fix: touched is not working -->
<mat-error *ngIf="form.get('visibility').invalid">Please select channel visibility.</mat-error>
</mat-radio-group>
</div>
组成部分:
initializeFormAndItsFields() {
this.form = new FormGroup({
title: new FormControl(null, {
validators: [Validators.required, Validators.minLength(3)]
}),
visibility: new FormControl(null,{
validators:[Validators.required]
}),
leadType: new FormControl(null,{
validators:[Validators.required]
}),
keywords: new FormControl(null, {
validators: [Validators.required, Validators.minLength(3)]
}),
});
}
3条答案
按热度按时间ecbunoof1#
1.声明一个标志(
isSubmitted
)来记录表单是否已提交。1.添加
submit
事件,以便在单击提交按钮时将isSubmitted
更新为true
。1.当
isSubmitted
为true
且FormControl
未通过验证时显示错误消息。Demo @ StackBlitz
f1tvaqid2#
不确定这是否有用。尝试
touched
,如下所示6ju8rftf3#
如果“formControl”无效并被触摸,则会通过defect显示mat-error,因此,通常可以在提交时使用markAsTouched
stackblitz中的一个小示例