如何为Angular2表单添加appCarrierFormValidation验证指令

Hey there! Let's break down how to apply your directive to your form, plus fix a critical issue in your current code that would prevent it from working as expected.

Step 1: Add the Directive Attribute to Your Form #

First things first—since your directive uses the selector [appCarrierFormValidation], you just need to add this attribute directly to the <form> element in your component template.

If your template looks like this (using reactive forms):

<form [formGroup]="addCarrierForm">
  <label>
    Name:
    <input formControlName="name">
    <div *ngIf="addCarrierForm.get('name')?.invalid && addCarrierForm.get('name')?.touched">
      Name is required
    </div>
  </label>
  <label>
    Email:
    <input formControlName="email">
    <div *ngIf="addCarrierForm.get('email')?.invalid && addCarrierForm.get('email')?.touched">
      Please enter a valid email
    </div>
  </label>
  <button type="submit" [disabled]="addCarrierForm.invalid">Submit</button>
</form>

Update it to include the directive attribute:

<form [formGroup]="addCarrierForm" appCarrierFormValidation>
  <!-- Your existing form fields stay the same -->
</form>

Step 2: Fix the Directive's Logic (This is Important!) #

Right now, your directive creates its own FormGroup in the constructor—but that's not how attribute directives work for forms. The directive will create a separate form instance that's disconnected from the one in your component, so your validation rules won't apply to the form the user is interacting with.

Here are two better approaches:

Option 1: Attach Validation to an Existing Form Group

If your component already creates the form group, modify the directive to grab that existing group and apply validation rules to it:

import { Directive, Input, OnInit } from '@angular/core';
import { FormGroup, Validators } from '@angular/forms';

@Directive({ selector: '[appCarrierFormValidation]' })
export class CarrierFormValidationDirective implements OnInit {
  // Grab the existing form group from the component via input binding
  @Input('formGroup') addCarrierForm!: FormGroup;

  ngOnInit() {
    this.applyValidations();
  }

  private applyValidations() {
    if (!this.addCarrierForm) return;

    // Add required validation to the name control
    this.addCarrierForm.get('name')?.setValidators(Validators.required);
    // Add required + email format validation to the email control
    this.addCarrierForm.get('email')?.setValidators([Validators.required, Validators.email]);
    
    // Update control states to apply the new validations immediately
    this.addCarrierForm.get('name')?.updateValueAndValidity();
    this.addCarrierForm.get('email')?.updateValueAndValidity();
  }
}

Option 2: Let the Directive Create and Bind the Form Group

If you want the directive to handle creating the form entirely, modify it to bind the form to the host element's form instance:

import { Directive, HostBinding, Inject } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { NgForm } from '@angular/forms';

@Directive({ selector: '[appCarrierFormValidation]' })
export class CarrierFormValidationDirective {
  @HostBinding('formGroup') addCarrierForm: FormGroup;

  constructor(
    private fb: FormBuilder,
    @Inject(NgForm) private ngForm: NgForm // Inject the host form instance
  ) {
    this.createForm();
    // Bind our directive's form to the host form so they're the same instance
    this.ngForm.form = this.addCarrierForm;
  }

  private createForm() {
    this.addCarrierForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }
}

With this option, your template can be simplified (no need to define addCarrierForm in the component):

<form appCarrierFormValidation>
  <label>
    Name:
    <input formControlName="name">
    <div *ngIf="addCarrierForm.get('name')?.invalid && addCarrierForm.get('name')?.touched">
      Name is required
    </div>
  </label>
  <label>
    Email:
    <input formControlName="email">
    <div *ngIf="addCarrierForm.get('email')?.invalid && addCarrierForm.get('email')?.touched">
      Please enter a valid email
    </div>
  </label>
  <button type="submit" [disabled]="addCarrierForm.invalid">Submit</button>
</form>

Step 3: Double-Check Your Module Setup #

You mentioned you already added the directive to your module's declarations array—just make sure you also imported the ReactiveFormsModule (required for reactive form directives like formGroup):

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { CarrierFormValidationDirective } from './carrier-form-validation.directive';

@NgModule({
  declarations: [
    AppComponent,
    CarrierFormValidationDirective
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule // Don't forget this!
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

That's it! Your form will now use the validation rules from your directive.

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