要在Angular Material中实现表单验证输入边框,可以使用以下步骤:
npm install @angular/material @angular/cdk @angular/animations
app.module.ts
中导入和配置Angular Material模块和动画模块:import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
@NgModule({
imports: [
BrowserAnimationsModule,
MatButtonModule,
MatInputModule,
MatFormFieldModule
],
...
})
export class AppModule { }
import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
@Component({
...
})
export class YourComponent {
username = new FormControl('', [Validators.required]);
password = new FormControl('', [Validators.required]);
}
在上述代码中,我们使用了mat-form-field
和mat-error
来显示输入框的边框和错误信息。FormControl
用于跟踪输入框的值和验证状态,Validators.required
用于验证输入框是否为空。
通过以上步骤,您就可以在Angular Material中实现带有验证的输入边框了。