gan*_*shk 15 typescript angular-material angular
我正在尝试使用<mat-for-field>
和进行验证<mat-error>
.当用户选中输入而不填充时,这可以正常工作.但是,如何在单击按钮时强制显示此错误?我没有使用提交.此外,使用模板驱动的表单.
这是我的代码:
HTML:
<mat-form-field>
<input matInput placeholder="Due Date" name="dueDate" [(ngModel)]="dueDate" [formControl]="dueDateValidator" required>
<mat-error *ngIf="dueDateValidator.invalid">Due Date is required for Tasks</mat-error>
</mat-form-field>
Run Code Online (Sandbox Code Playgroud)
TS:
dueDateValidator: FormControl = new FormControl('', [Validators.required]);
Kyl*_*mer 22
如果您希望覆盖此行为(例如,一旦无效控件变脏或父表单组无效时显示错误),您可以使用matInput的errorStateMatcher属性.该属性采用ErrorStateMatcher对象的实例.ErrorStateMatcher必须实现单个方法isErrorState,该方法接受此matInput的FormControl以及父窗体并返回一个布尔值,指示是否应显示错误.(true表示应该显示它们,false表示它们不应该显示.)
我会创建一个单独的文件,如default.error-matcher.ts
/** Error when invalid control is dirty or touched*/
export class MyErrorStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
return !!(control && control.invalid && (control.dirty || control.touched));
}
}
Run Code Online (Sandbox Code Playgroud)
然后在TS文件中添加:
matcher = new MyErrorStateMatcher();
Run Code Online (Sandbox Code Playgroud)
然后更改输入以使用匹配器:
<mat-form-field>
<input matInput placeholder="Due Date" name="dueDate" [(ngModel)]="dueDate" [formControl]="dueDateValidator" [errorStateMatcher]="matcher" required>
<mat-error *ngIf="dueDateValidator.invalid">Due Date is required for Tasks</mat-error>
</mat-form-field>
Run Code Online (Sandbox Code Playgroud)
Spo*_*ck 16
Angular 8 有一个新的表单方法: markAllAsTouched();
这会将控件/表单和所有后代标记为已触摸!!!
所以:
this.form.markAllAsTouched();
Run Code Online (Sandbox Code Playgroud)
是解决方案。
Sim*_*aur 15
由于您想在按钮的单击上显示mat错误,请尝试以下操作:对于Angular6版本:
1). import below:
import { FormControl, FormBuilder, FormGroup } from '@angular/forms';
2). declare form control in .ts file:
nameControl = new FormControl('');
3). put control in html:
<mat-form-field style="width: 100%" floatPlaceholder="never">
<input matInput placeholder="your placeholder text" [formControl]="nameControl"
required/>
<mat-error *ngIf="nameControl.errors?.required">name is required</mat-error>
</mat-form-field>
3). on button's click:
this.nameControl.markAsTouched();
Run Code Online (Sandbox Code Playgroud)
检查您使用表单控件的方式很重要,第3点的".markAsTouched()"将显示相应表单控件的mat错误.
我为不同的场景提供了 3 种不同的解决方案,使用适合您的一种。
如果您使用的是表格,那么请执行
this.form.markAllAsTouched();
Run Code Online (Sandbox Code Playgroud)如果您需要在表单内影响特定字段,请过滤该 nameControl 并执行
nameControl.markAsTouched();
Run Code Online (Sandbox Code Playgroud)如果您不使用 forms,ref
则为input
元素指定 a并在 ts 文件中初始化变量并执行以下操作,
@ViewChild('myInputRef') myInputRef; // Initialize the ref of input element
.
.
this.myInputRef.control.markAsTouched()
Run Code Online (Sandbox Code Playgroud) 归档时间: |
|
查看次数: |
37714 次 |
最近记录: |