Angular 5结合Material时必填表单字段验证失效问题

Hey there! I’ve run into this exact form validation snag back when working with Angular 5, so let’s walk through the most common fixes to get your shop name field’s error prompts working as expected:

• Double-check you’ve imported the required form modules
  This is the #1 gotcha! If you’re using template-driven forms, make sure FormsModule is added to your module’s imports. For reactive forms, you’ll need ReactiveFormsModule (you can import both if you’re mixing approaches). Without these, Angular won’t recognize any form directives:

  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  
  @NgModule({
    imports: [
      // ... other modules like BrowserModule
      FormsModule,
      ReactiveFormsModule
    ]
  })
  export class YourFeatureModule {}
  

• Verify your form and field setup matches the validation trigger conditions
  The official docs use touched (triggered when the user leaves the field) or dirty (triggered when the user modifies the field) to show errors. Make sure your error display logic includes these states, otherwise errors won’t show when the user enters/exits the field.

  For template-driven forms:

  <form #shopForm="ngForm" novalidate>
    <label>店铺名称</label>
    <input 
      type="text"
      name="shopName"
      [(ngModel)]="shopName"
      required
      #shopNameCtrl="ngModel"
    >
    <!-- Only show error when field is invalid AND touched/modified -->
    <div *ngIf="shopNameCtrl.invalid && (shopNameCtrl.touched || shopNameCtrl.dirty)">
      <p *ngIf="shopNameCtrl.errors.required">店铺名称不能为空</p>
    </div>
  </form>
  

  Key points here: the input has a name attribute (Angular needs this to track the control), #shopNameCtrl="ngModel" lets you access the control’s state, and the *ngIf condition checks for touched/dirty along with invalid status.

  For reactive forms:

  // In your component class
  import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  
  shopForm: FormGroup;
  
  constructor(private fb: FormBuilder) {}
  
  ngOnInit() {
    this.shopForm = this.fb.group({
      shopName: ['', Validators.required] // Add your validators here
    });
  }
  

  <form [formGroup]="shopForm" novalidate>
    <label>店铺名称</label>
    <input type="text" formControlName="shopName">
    <div *ngIf="shopForm.get('shopName').invalid && (shopForm.get('shopName').touched || shopForm.get('shopName').dirty)">
      <p *ngIf="shopForm.get('shopName').errors.required">店铺名称不能为空</p>
    </div>
  </form>
  

• Disable browser native validation
  Adding novalidate to your <form> tag prevents the browser’s default validation from interfering with Angular’s custom logic. This is especially helpful if you’re seeing unexpected behavior or no feedback at all.

• Check for accidental state overrides
  Make sure you’re not manually setting the control’s touched or dirty state to false somewhere in your component code. Accidental resets can prevent the error prompts from showing when they should.

Start with these checks—9 times out of 10, the issue is a missing module import or an incorrect state condition in the error display. Let me know if you need to dive deeper into a specific setup!

内容的提问来源于stack exchange，提问作者Thom