typescript - Hur man får en Angular-anpassad validator att fungera endast vid inskickning?


Jag utvecklade en inloggningskomponent med hjälp av Angular-8 reaktivt formulär-konceptet. Jag har asynkrona valideringar som tomma fält, ogiltiga e-postadresser. Dessa valideringar bör vara asynkrona. Men jag har två anpassade validatorer som is-user-exist, is-password-match-user. Dessa två validatorer bör endast valideras om användaren klickar på skicka. Hur kan man ha en reaktiv formulärvalidator för att bara kontrollera dessa två validatorer vid skickande och de andra valideringarna asynkront.

Svar #1

Du kan kontrollera ett formulär (eller enskilda formulärelement) när värdet eller giltigheten uppdateras. Denna funktion har funnits i AngularJS 1.x men saknades i Angular 2+ under en tid. Från och med någon version (Angular 5 tror jag) kan det vara en av:

  • ändra: ändra är standardläget. Genom att använda detta uppdateringsalternativ uppdateras formuläret/formulärkontrollen efter varje enskild ändring.
  • blur: suddighetsändringsläget uppdateras endast värdena/giltighetsstatusen efter att en formulärkontroll har förlorat fokus.
  • skicka: uppdateringar görs endast efter att formuläret skickats.

I reaktiva formulär kan detta göras med inställningen updateOn för antingen formuläret eller formulärkontrollen. Exempel på kod:

this.nameForm = new FormGroup ({
  firstname: new FormControl('', {
    validators: Validators.required,
    updateOn: 'change'
  }),
  lastname: new FormControl('', {
    validators: Validators.required,
    updateOn: 'submit' // <--
  })
});