Forme réactive angulaire - Je souhaite obtenir une propriété de formulaire et vérifier si elle est sale et vierge.
Tech : formes angulaires 7 et réactives.
Mon formulaire:
<p *ngIf="form.address.addressLine1.dirty">Error....</p>
Je veux que form.address.addressLine1 et form.companyName soient vérifiés pour voir s'ils sont sales et impeccables dans le html afin que je puisse montrer un message d'erreur.
Tentative en cours:
<form class="flex flex-wrap col-12" [formGroup]="form" (ngSubmit)="submit()">
<input type="text" placeholder="Company Name*" formControlName="companyName" class="col-12 field">
<div formGroupName="address" class="col-12 mb1">
<input class="col-12 field field-google" type="text" placeholder="Your Location*" id="Location" [options]='options' formControlName="addressLine1">
</div>
</form>
3 Réponses :
Lorsque vous utilisez un FormGroup, vous pouvez accéder aux enfants en utilisant la propriété controls . Qui est une carte.
<p *ngIf="form.controls['address'].controls['addressLine1'].dirty">Error....</p>
Vous avez deux groupes imbriqués. Vous devez donc utiliser les contrôles deux fois.
Pas ce que vous avez demandé mais vous pouvez également utiliser les classes HTML CSS.
exemple:
/* VALID */
form.ng-dirty {
input {
&.ng-valid.ng-dirty:not(.ng-pristine){
p {
display: none;
}
}
}
}
/* INVALID */
form.ng-dirty {
input {
&.ng-invalid.ng-dirty:not(.ng-pristine){
p {
display: block;
}
}
}
}
Vous pouvez accéder aux contrôles en utilisant get () comme ci-dessous:
Erreur ....
De même, vous pouvez accéder à companyName comme: Erreur ....