angular 自定义表单验证

原创

于 2022-05-11 01:00:49 发布 · 2.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#angular.js #前端 #javascript

本文介绍了Angular框架如何通过内置的FormControl、FormGroup和FormBuilder进行前端表单验证，包括基本用法、实例演示和关键组件的作用。适合初学者了解Angular表单验证的实战应用。

说明

前端校验基本是每个开发者必须具备的能力，除了我们自己用一些插件去做一些校验外，比如vue中就需要自己引入一些库去做。那么angular给我们内置了哪些了？其实angular内置也好，不用我们自己去捣鼓，但是用是感觉很一般吧。

例子

1 一个简单的账户、密码、手机号的界面及代码

import {
   
    Component } from '@angular/core';
import {
   
    FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
   
   
  selector: 'app-root',
  // templateUrl: './app.component.html',
  template: `
  <form action="" [formGroup]="valiDataForm">
    帐号: <input required type="text" formControlName="username"><br>
    <p *ngIf="valiDataForm.get('username')?.errors?.required">请输入帐号</p>
    密码: <