web-dev-qa-db-fra.com

Angular 5 uniquement validation sur flou?

Je me demande s'il est possible d'avoir la validation sous formes réactives sur flou. Pour le moment, vous pouvez définir updateOn: "blur" mais les valeurs des champs de saisie ne seront pas mises à jour lors de la saisie. Dans mon cas, j'ai besoin que les valeurs soient mises à jour à chaque frappe, car je fais des calculs avec et montre le résultat à l'utilisateur. La validation ne doit avoir lieu que sur flou.

tHX.

ÉDITER:

J'utilise FormBuilder, certains validateurs intégrés et certains validateurs personnalisés. Exemple de code:

let formToMake = {
  purpose: [null, Validators.required],
  registrationDate: this.fb.group({
    day: [null, Validators.required],
    month: [null, Validators.required],
    year: [null, Validators.required]
  }),
  isTruth: [null, Validators.compose([checkIfTrue, Validators.required])]
};

Si j'utilise l'événement de flou, je dois faire toute ma validation manuellement, ce qui, à mon avis, n'est pas un bon moyen.

javascriptangularangular5angular-validation
6
timfrans

Ce que j'ai finalement fait:

Utilisation de formes réactives:

TS

c'est la forme à faire. J'avais besoin que le productCost et le loanAmount soient validés sur le flou, mais les valeurs elles-mêmes devaient être mises à jour lors du changement. Si vous définissez updateOn: "blur" la validation a lieu après l'événement de flou, mais les valeurs seront également mises à jour après l'événement de flou.

let formToMake = {
      productCost: new FormControl(null, {validators: Validators.required, updateOn: "blur"}),
      loanAmount: new FormControl(null, {validators: Validators.compose([Validators.required, Validators.min(2500)]), updateOn: "blur"}),
      loanLength: new FormControl(49, {validators: Validators.required, updateOn: "change"})
    };

Méthode handleInput :

Pour résoudre ce problème, je viens de créer un gestionnaire d'événements qui sera appelé sur l'événement d'entrée.

TS 

handleInput(e: any) {
    this.loanAmount = e;
  }

HTML 

<input class="form__input" type="number" value="{{loanForm.get('loanAmount').value}}" id="loanAmount" formControlName="loanAmount" (input)="handleInput($event.target.value)">
9
timfrans

updateOn n'est qu'une méthode d'accès aux propriétés. La balise HTML d'entrée a une liaison d'événement nommée blur pourrait être utilisée pour cette commodité.

URL du document officiel. https://angular.io/guide/user-input#on-blur

0
Antonio de la mata

Je crois que vous recherchez ng-binding sur l'élément Angular. Par exemple, vous pouvez vous lier aux frappes et flou comme ceci pour le champ de saisie:

<input type=text (blur)="validate()" (keypress)="eventHandler($event)">

eventHandler(event) {
   console.log(event, event.keyCode, event.keyIdentifier);
   // Update value of string on every keystroke
} 

validate() {
   // Validation code goes here
}

Vous pouvez également utiliser ngModel et vous n'aurez alors plus à vous soucier de la frappe car la chaîne serait automatiquement mise à jour pour vous. Cela ressemblerait à quelque chose comme ceci:

<input [(ngModel)]="name" (blur)="validate()">

name: string;

validate() {
   // Validation code goes here
}

Puisque vous envisagez d'utiliser le module de formulaires réactifs et leur validation, vous pouvez faire quelque chose comme ceci:

Approche par modèle

<input [(ngModel)]="lastname" [ngModelOptions]="{ updateOn: 'blur' }">

La liaison ngModel changera l'entrée à chaque frappe afin que vous n'ayez pas à le faire manuellement. Je suggérerais vraiment d'adopter cette approche puisque c'est ce que vous demandez actuellement de faire.

Approche des formes réactives 

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

Références: approche SOarticle moyen

0
mclem