表单控件的状态除了 touched 外，还包含其它几种状态？

Question

在 Angular 中，表单控件的状态是由一组标志（flags）组成的，它们用来指示控件在表单中的不同状态。除了 touched ，常见的状态还包括以下几种：

1. dirty

• 说明 : dirty 标志指示表单控件的值是否已经被修改。如果用户在控件中输入了内容或改变了默认值，控件的 dirty 状态会被设置为 true 。
• 应用场景 : 用来判断控件是否经历过用户交互，通常与 pristine 状态相对。
• 示例 : html <input [(ngModel)]="userName" #userName="ngModel" /> ¨K10K

2. pristine

• 说明 : pristine 是 dirty 的反义词，表示控件的值自创建后没有被修改过。如果用户没有改变控件的初始值，它将保持 pristine 状态。
• 应用场景 : 用于判断控件是否被修改，通常与 dirty 状态相对。
• 示例 : html <input [(ngModel)]="userName" #userName="ngModel" /> ¨K11K

3. touched

• 说明 : touched 状态表示用户是否已触及该控件（即用户是否点击过并离开了该控件）。如果用户点击过控件并离开（不管是否修改了其值）， touched 状态会被设置为 true 。
• 应用场景 : 用来判断控件是否已被用户访问过，通常与 untouched 状态相对。
• 示例 : html <input [(ngModel)]="userName" #userName="ngModel" /> ¨K12K

4. untouched

• 说明 : untouched 是 touched 的反义词，表示控件从未被用户触及过。如果控件还没有被用户访问（点击），它将保持 untouched 状态。
• 应用场景 : 用于判断控件是否被用户触及，通常与 touched 状态相对。
• 示例 : html <input [(ngModel)]="userName" #userName="ngModel" /> ¨K13K

5. valid

• 说明 : valid 状态表示控件的值是否符合控件的验证规则。如果控件的当前值通过了所有验证（如 required 、 minlength 等），则它的 valid 状态为 true 。
• 应用场景 : 用于判断控件是否有效，通常与 invalid 状态相对。
• 示例 : html <input [(ngModel)]="email" name="email" #email="ngModel" required email /> ¨K14K

6. invalid

• 说明 : invalid 是 valid 的反义词，表示控件的值不符合控件的验证规则。如果控件的值未通过所有的验证， invalid 状态将为 true 。
• 应用场景 : 用于判断控件是否无效，通常与 valid 状态相对。
• 示例 : html <input [(ngModel)]="email" name="email" #email="ngModel" required email /> ¨K15K

7. pending

• 说明 : pending 状态表示控件的验证正在进行中，通常是异步验证时出现的状态。控件可能在等待服务器验证时处于此状态。
• 应用场景 : 用于检查控件是否处于验证过程中，通常与 valid 和 invalid 状态相对。
• 示例 : html <input [(ngModel)]="username" name="username" #username="ngModel" asyncValidator /> ¨K16K

8. disabled

• 说明 : disabled 状态表示控件是否被禁用。如果控件被禁用（使用 disabled 属性或通过 FormControl.disable() 禁用），则控件的 disabled 状态为 true 。
• 应用场景 : 用于判断控件是否被禁用，通常与 enabled 状态相对。
• 示例 : html <input [(ngModel)]="userName" [disabled]="isDisabled" #userName="ngModel" /> ¨K17K

总结

表单控件的状态包括：

• dirty / pristine ：表示控件的值是否已被修改。
• touched / untouched ：表示控件是否被用户触及。
• valid / invalid ：表示控件的值是否通过验证。
• pending ：表示控件是否正在进行异步验证。
• disabled ：表示控件是否被禁用。

这些状态可以帮助你动态控制表单的行为和显示信息，特别是在表单验证和用户交互时。