typescript - Hvordan sette Validator til egendefinert skjemaelement i Angular

Jeg vil sette validatorer til nøyaktig kontroll i formGroup fra utsiden av den tilpassede kontrollkomponenten:

<form [formGroup]="fg">
    <custom-control formControlName="custom">
    </custom-control>
</form>

this.fg = this.fb.group({
      custom: [null,Validator.required]
});

Dette er den egendefinerte kontrollkomponenten:

@Component({
  selector: 'custom-control',
  template: `
  <mat-form-field>
        <input [formControl]="inputFormControl" />
        <mat-error 
           *ngIf="inputFormControl.hasError('required')">Required</mat-error>
  </mat-form-field>
  `,
  styleUrls: ["custom-control.component.scss"],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi:true,
      useExisting: CustomControlComponent
    }
  ]
})
export class CustomControlComponent implements ControlValueAccessor {

  inputFormControl: new FormControl();
  onChange = (quantity) => {};

  onTouched = () => {};

  writeValue(quantity: number) {
    this.quantity = quantity;
  }

  registerOnChange(onChange: any) {
    this.onChange = onChange;
  }

  registerOnTouched(onTouched: any) {}
}

Hvordan kan denne påkrevde feilen vises? Og hva om jeg setter en annen validator gjennom fg.get('custom').setValidator(XXX)? Takk!

Svar #1

Hvis du vil bruke mat-error:

  • elementet mat-error må være i et mat-form-field med input som gir feilen
  • FormControl som fysisk befinner seg i mat-form-field må være den eksakte FormControl som valideres

I din nåværende situasjon, trenger du å legge til en mat-form-field rundt din custom-control og plassere mat-error der sammen med den, i stedet for å ha mat-error inni custom-component.

Svar #2

implementer Validator-grensesnittet og gi NG_VALIDATORS

 @Component({
  selector: 'custom-control',
  template: `
        <input [formControl]="inputFormControl" />
        <mat-error *ngIf="inputFormControl.hasError('required')">Required</mat-error>
  `,
  styleUrls: ["custom-control.component.scss"],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi:true,
      useExisting: CustomControlComponent
    },
    {
        provide: NG_VALIDATORS,
        useExisting: forwardRef(() => CustomControlComponent),
        multi: true,
    },
  ]
})
export class CustomControlComponent implements ControlValueAccessor, Validator {

  inputFormControl: new FormControl();
  onChange = (quantity) => {};

  onTouched = () => {};

  writeValue(quantity: number) {
    this.quantity = quantity;
  }

  registerOnChange(onChange: any) {
    this.onChange = onChange;
  }

  registerOnTouched(onTouched: any) {}

  onValidatorChange = () => {
  };

  registerOnValidatorChange(fn: () => void): void {
    this.onValidatorChange = fn;
   }

  validate(c: AbstractControl): ValidationErrors | null {
    return this.inputFormControl.invalid ? { internal: true } : null;
  }
}

Relaterte artikler