当前使用角度6反应形式,需要在输入控件上的悬停时显示验证消息。
Here are answers how to do it with angular material , but you can adopt to your needs
Option mouse events
<form class="example-form">
<mat-form-field class="example-full-width">
<input matInput placeholder="Email" [formControl]="emailFormControl"
(mouseenter) ="showError = true; " (mouseleave) ="showError = false;">
<mat-error *ngIf="showError && emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
Please enter a valid email address
</mat-error>
</mat-form-field>
</form>
Option tooltip
<form class="example-form">
<mat-form-field class="example-full-width">
<input matInput placeholder="Email" [formControl]="emailFormControl"
matTooltip="Error" matTooltipDisabled="!emailFormControl.hasError('email')">
</mat-form-field>
</form>
Here, give this a try. I'm using CSS Tooltip here :
p {
font-family: Lato;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
In your Template:
<form [formGroup]="form" (submit)="onSubmit()">
<div class="tooltip">Control: <input type="text" formControlName="control">
<span class="tooltiptext">This field is Required</span>
</div>
<br><br>
<button [disabled]="form.invalid">Submit</button>
</form>
Your Component:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
form: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.form = this.fb.group({
control: [null, Validators.required]
});
}
onSubmit() {
}
}
Here's a Working Sample StackBlitz for your ref.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.