AgentSkillsCN

angular-forms

遵循信号式表单、响应式表单、验证与提交处理等Angular表单指南。在Angular中创建或修改表单时使用此功能。

SKILL.md
--- frontmatter
name: angular-forms
description: Angular forms guidelines covering signal-based forms, reactive forms, validation, and submit handling. Use when creating or modifying forms in Angular.

Angular Forms

See AGENTS.md for general guidelines.

Signal-based Forms

  • •Angular 21+: use signal-based forms
  • •For older versions: use reactive forms (FormGroup, FormControl)

Validation

  • •Use Angular's built-in form validation — do not implement validation logic outside of Angular forms
  • •Never disable the submit button based on form.invalid
  • •The submit button must always be enabled
  • •Never manually track validation state with custom signals or variables — derive it from the form

Submit Handling

On submit:

  1. •Call form.markAllAsTouched() so validation messages appear in the UI
  2. •Check form.invalid — if invalid, return early
  3. •Proceed with the actual submit logic
ts
onSubmit() {
  this.form.markAllAsTouched();
  if (this.form.invalid) {
    return;
  }
  // submit logic
}