验证 minlength Angular - TypeScript

在 Angular 中，我们可以使用模板驱动或响应式表单来验证用户输入的数据。其中一个常见的验证是 minlength 验证，它验证输入字段的最小长度是否符合要求。

模板驱动表单中的 minlength 验证

在模板驱动表单中，我们可以使用 Angular 的内置指令 ngModel 和 ngModelGroup 来设置 minlength 验证。

<form #myForm="ngForm">
  <div ngModelGroup="username">
    <label for="firstName">First Name</label>
    <input id="firstName" name="firstName" [(ngModel)]="user.firstName" minlength="3" required>

    <label for="lastName">Last Name</label>
    <input id="lastName" name="lastName" [(ngModel)]="user.lastName" minlength="3" required>
  </div>
</form>

在上述代码中，我们在 input 元素中设置 minlength="3" 属性来定义验证规则。如果用户输入的字符数少于 3，就会触发验证失败。此外，我们还设置了 required 属性，表示该字段是必填字段。

在组件中，我们可以通过 myForm.invalid 来检查表单是否验证失败。

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
})
export class MyFormComponent {
  user = {
    firstName: '',
    lastName: '',
  };

  onSubmit() {
    console.log('Form submitted!');
  }
}

响应式表单中的 minlength 验证

在响应式表单中，我们可以使用 Validators.minLength() 方法来设置 minlength 验证。

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

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
})
export class MyFormComponent {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.userForm = this.fb.group({
      firstName: ['', [Validators.minLength(3), Validators.required]],
      lastName: ['', [Validators.minLength(3), Validators.required]],
    });
  }

  onSubmit() {
    console.log('Form submitted!');
  }
}

在上述代码中，我们使用 Validators.minLength(3) 方法来设置验证规则。在 onSubmit() 方法中，我们可以检查表单是否验证通过，通过 this.userForm.invalid 属性来检查。

总结

以上是验证 minlength 的两种方式，模板驱动表单和响应式表单。无论哪种方式，都可以有效地验证用户输入的数据。对于其他表单验证，可以查看 Angular 官方文档。