Utilisation de [mat-dialog-close]
Je suis un peu confus quant à l'utilisation de [mat-dialog-close].
Donc, j'ai un dialogue avec un formulaire. Si l'utilisateur clique sur le bouton d'envoi, le formulaire est validé. Si la saisie est valide, la boîte de dialogue est fermée et le formulaire est soumis. Cependant, si l'entrée n'est pas valide, la boîte de dialogue reste ouverte et un message d'erreur s'affiche. Pour cela, je veux utiliser [mat-dialog-close] comme décrit dans la documentation officielle où il est utilisé comme suit:
<button mat-button [mat-dialog-close]="true">Yes</button>
Je pensais que je pouvais simplement passer un booléen et que le tag soit actif dépend de la valeur booléenne de la variable. Cependant, cela ne fonctionne pas. J'ai essayé comme ça:
<button type="submit" (click)="addUser()" [mat-dialog-close]="formisvalid" mat-button>Submit</button>
Je lui ai passé la variable formisvalid. Sa valeur est true à moins que l'entrée ne soit invalide. Mais à présent, le dialogue se ferme toujours, quelle que soit la valeur de formisvalid. J'ai également essayé de le remplacer par false. Je pensais que le dialogue resterait ouvert quoi qu'il arrive, mais il se fermerait toujours.
Ma question est donc la suivante: est-ce que je me trompe au sujet de l’utilisation de [mat-dialog-close] ou est-ce que je fais quelque chose de mal? Si cela n’est pas réalisable avec la directive [mat-dialog-close], quel autre moyen de réaliser ce que j’essaie de faire?
Définissez votre bouton pour qu'il soit désactivé si le formulaire n'est pas valide. De cette façon, le bouton ne peut être cliqué que si le formulaire est valide, ce qui signifie qu'il ne se fermera que si le formulaire est valide.
<button type="submit" (click)="addUser()" mat-dialog-close [disabled]="formisvalid" mat-button>Submit</button>
Pour que la réponse soit complète: mat-dialog-close fermera votre boîte de dialogue si vous cliquez dessus, quelle que soit la valeur que vous lui attribuez. Si vous voulez contrôler si un clic ferme la boîte de dialogue, utilisez [disabled]="formisvalid" comme [autre réponse].
Cependant, la valeur attribuée à mat-dialog-close n'est pas ignorée. Elle est interprétée comme la valeur de dialogue résultat et, en tant que telle, elle peut être lue par le composant qui a ouvert la boîte de dialogue en s'abonnant à dialogRef.afterClosed(). Ce comportement est expliqué dans la documentation officielle: