web-dev-qa-db-fra.com

Angular 2 - Paramètre FormControl setValue 'onlySelf'

Essayer de comprendre ce que fait le paramètre "onlySelf" lors du passage à setValue.

this.form.get('name').setValue('', { onlySelf: true })

La documentation indique: "Si onlySelf est vrai, cette modification n'affectera que la validation de ce FormControl et non son composant parent. Cela vaut par défaut false."

Cependant, j'ai du mal à comprendre cela. Encore assez nouveau pour l'utilisation des formes pilotées par les modèles d'Angulars.

formsangularsetvalue
19
leepowell

Angular2 par défaut vérifie la validité du contrôle de formulaire/groupe de formulaires en cascade jusqu'au niveau supérieur chaque fois qu'il y a une mise à jour d'une valeur d'élément de formulaire, sauf si vous dites non. onlySelf est l'outil pour vous aider.

Supposons que vous ayez un loginForm qui a un champ username et un champ password, les deux sont obligatoires, comme ceci:

this.userNameControl = this.formBuilder.control('Harry', Validators.required);
this.passwordControl = this.formBuilder.control('S3cReT', Validators.required);
this.loginForm = this.formBuilder.group({
  userName: this.userNameControl,
  password: this.passwordControl
});

Après ce code, this.loginForm.valid est true.

Si vous définissez la valeur d'un contrôle à l'aide du paramètre par défaut (onlySelf = false), Angular2 mettra à jour la validité du contrôle ainsi que la validité du groupe de formulaires. Par exemple, ceci:

this.passwordControl.setValue('');

aura pour résultat

this.passwordControl.valid === false
this.loginForm.valid === false

Cependant, ceci:

this.passwordControl.setValue('', { onlySelf: true });

ne modifiera que la validité de passwordControl:

this.passwordControl.valid === false
this.loginForm.valid === true
35
Harry Ninh

En d'autres termes, disons que vous avez un formulaire, appelé mainForm qui est valide. Il a quatre contrôles et les quatre ont une valeur. Maintenant, vous décidez de mettre à jour la valeur de l'un de vos contrôles, disons que vous le mettez à jour avec une valeur incorrecte et que vous spécifiez onlySelf: true. Si vous essayez d'appeler this.mainForm.valid, vous obtiendrez le résultat que votre formulaire est valide même si votre contrôle est non valide, et son état non valide ne doit pas autoriser la soumission du formulaire. Mais comme la propriété de formulaire valide signale vrai, vous soumettez des valeurs incohérentes au backend.

La raison pour laquelle vous possédez cette propriété peut être déroutante, mais il peut arriver que vous ne souhaitiez pas invalider le formulaire en raison d'une valeur ou d'un contrôle. Vous avez probablement des vérifications avancées sur le serveur et vous souhaitez corriger la valeur sur le serveur ou vous pouvez dépendre d'une valeur d'un service Web externe qui pourrait ne pas être disponible à ce moment-là. Je suis sûr qu'il existe un certain nombre de scénarios, mais c'est quelque chose qui vient du haut de ma tête.

12
Husein Roncevic