angular 4.0 表单控件的状态

最新推荐文章于 2022-05-10 10:53:46 发布

1322300062

最新推荐文章于 2022-05-10 10:53:46 发布

阅读量442

点赞数

angular 专栏收录该内容

36 篇文章

订阅专栏

本文详细介绍了Angular中表单控件的六种状态，包括有效(valid)、无效(invalid)、未改变(pristine)、已改变(dirty)、已被访问过(touched)和未被访问过(untouched)，并通过示例展示了如何使用这些状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载自 http://www.ngui.cc/news/show-144.html

表单控件除了 valid 状态外，还包含哪些状态？

在 Angular 中表单控件有以下 6 种状态，我们可以通过 #userName="ngModel" 方式获取 ngModel 对象，进而获取控件的状态信息。具体状态如下：

valid - 表单控件有效
invalid - 表单控件无效
pristine - 表单控件值未改变
dirty - 表单控件值已改变
touched - 表单控件已被访问过
untouched - 表单控件未被访问过

import { Component } from '@angular/core'; @Component({
  selector: 'app-root',
  styles: [`
   input.ng-invalid {
       border: 3px solid red;
    }
   input.ng-valid {
       border: 3px solid green;
    }
  ` ],
  template: `
  <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
   <fieldset ngModelGroup="user">
    <input 
     type="text" 
     required
     minlength="3"
     name="username"
     [(ngModel)]="username"
     #userName="ngModel">
    <hr>
    <p>Name控件的valid状态：{{userName.valid}} - 表示控件有效</p>
    <p>Name控件的invalid状态：{{userName.invalid}} - 表示控件无效</p>
    <p>Name控件的pristine状态：{{userName.pristine}} - 表示控件值未改变</p>
    <p>Name控件的dirty状态：{{userName.dirty}} - 表示控件值已改变</p>
    <p>Name控件的touched状态：{{userName.touched}} - 表示控件已被访问过</p>
    <p>Name控件的untouched状态：{{userName.untouched}} - 表示控件未被访问过</p>
    <div *ngIf="userName.errors?.required">请您输入用户名</div>
    <div *ngIf="userName.errors?.minlength">
      用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}}，当前的长度为
        {{userName.errors?.minlength.actualLength}}
    </div>
    <input type="password" required ngModel name="password">
   </fieldset>
    <button type="submit">提交</button>
    <hr>
    {{loginForm.value | json}}
  </form>
  `,
}) export class AppComponent {
  username = 'semlinker';

  onSubmit(value) { console.dir(value);
  }
}