Ceci est l'extrait de code de ma forme !! Je suis confronté à des problèmes avec le désactivation du bouton Soumettre si le formulaire est vide ou que le bouton rempli partiel doit être désactivé, j'ai besoin de tous les champs à remplir !! Peut-on me suggérer ce qui a mal tourné?
p>
<form class="individual-form" method="post" [formGroup]="valueform" (ngSubmit)="onSubmit()">
<div class="input_tab" *ngIf="!showcontent">
<div class="form-group">
<div class="input_text"><span>Name</span></div>
<input type="Name" formControlName="Name" required class="signupForm_input " [(ngModel)]="name" id="login-name" placeholder="Your Name"><br>
<div *ngIf="name.touched && name.errors" class="errorMessage">
<span *ngIf="name.hasError('required')">UserName is required.</span>
<span *ngIf="name.hasError('maxlength')">Only 10 characters allowed for UserName.</span>
<span *ngIf="name.hasError('minlength')">Atleast 5 characters needed for UserName.</span>
</div>
</div>
<div class="form-group">
<div class="input_text"><span>Email</span></div>
<input type="Email" formControlName="email" class="signupForm_input " [(ngModel)]="email" id="login-email" placeholder="Your Email"><br>
<div *ngIf="email.touched && email.errors" class="errorMessage">
<span *ngIf="email.hasError('required')">Email is required.</span>
<span *ngIf="email.hasError('email')">Please provide valid email.</span>
</div>
</div>
<div class="form-group">
<div class="input_text"><span>Phone Number</span></div>
<input type="Phone" formControlName="phone" class="signupForm_input" [(ngModel)]="phone" id="login-phone" placeholder="Phone Number"><br>
<div *ngIf="phone.touched && phone.errors" class="errorMessage">
<span *ngIf="phone.hasError('required')">phone no is required.</span>
<span *ngIf="phone.hasError('phone')">Please provide valid phone no.</span>
</div>
</div>
<div class="form-group">
<div class="input_text"><span>Password</span></div>
<input type="Password" formControlName="password" class="signupForm_input" [(ngModel)]="password" id="login-password" placeholder="Password"><br>
<div *ngIf="password.touched && password.errors" class="errorMessage">
<span *ngIf="password.hasError('required')">Password is required.</span>
<span *ngIf="password.hasError('maxlength')">Only 10 characters allowed for password.</span>
<span *ngIf="password.hasError('minlength')">Atleast 5 characters needed for password.</span>
</div>
</div>
<div class="form-group">
<div class="input_text"><span>Confirm Password</span></div>
<input type="confirm" formControlName="confirmpassword" class="signupForm_input" [(ngModel)]="cpassword" id="login-confirmpassword" placeholder="Confirm Password"><br>
<div *ngIf="cpassword.touched && cpassword.errors" class="errorMessage">
<span *ngIf="cpassword.hasError('required')">Confirm Password is required.</span>
<span *ngIf="cpassword.hasError('mustMatch')">Password Must Match.</span>
</div>
</div>
<button [disabled]="valueform.invalid" class="submit" >SUBMIT</button><br>
<button (click) ="gotoLogin()" class="login">LOGIN</button>
<div class="terms">
<span>By signing up you are agreeing our poilcy <a href="Privacy">Privacy </a>&<a href="terms">Terms.</a></span>
</div>
</div>
</form>4 Réponses :
Tout d'abord, vous ne devez pas utiliser FormControlName et NGModel ensemble car il est obsolète par des mises à jour angulaires.
Comme vous utilisez Soumettre, vous devez définir le type de bouton explicitement. Si vous rencontrez toujours des problèmes, il s'agit de faire avec les validateurs de formulaire.
L'ajout de type n'a pas aidé non plus, pas sûr de ce que le problème avec des validateurs.Je pense que tout est bon est des validateurs
Pourriez-vous s'il vous plaît partager le code du fichier .TS? Voyons chercher le problème.
Stackblitz.com/edit/typescript-zmsajw Voici mon fichier TS @ankit
Essayez ceci espère que cela aide.
Ça fera tout ce que vous déconnectez tout.
Votre formulaire est "Nom d'utilisateur" et vous vérifiez la validation comme touché "Nom". Similaire pour ConfirPassword. P>
https://angular.io/guide/reactive-Forms p>
formontrolname est déjà là, il n'est pas nécessaire d'utiliser [(NGModel)] = "Téléphone" dans ce cas simple. Preferfer à utiliser soit réactif ou modèle non mélangé à la fois. P >
https://stackoverflow.com/a/52642358/7562674 p> dans TS: - P> ngOnInit() {
this.name = new FormControl('', [Validators.required]);
this.phone = new FormControl('', [Validators.required]);
this.password = new FormControl('', [Validators.required]);
this.cpassword = new FormControl('',[Validators.required]);
this.email = new FormControl('', [Validators.required]);
this.errorList = [];
this.valueform = this.formBuilder.group(
{
'name': this.name,
'email': this.email,
'phone': this.phone,
'password': this.password,
'cpassword': this.cpassword,
});
}
Oui mon mauvais !! mappé à tort !! Travailler bien maintenant !! Merci
Comment puis-je afficher des erreurs du formulaire uniquement après avoir cliqué sur le bouton Soumettre? Actuellement, mon code montre des erreurs après chaque fois que je suis dans le champ de texte
Cela peut être fait de deux manières: - a. Créer un drapeau booléen IssUBMIGE = FAUX et défini après appel à Soumettre () et dans la validation Ajouter un chèque pour ce drapeau. b. Sous forme [Formgroup] = "ValeurForm" # NGFORM = "NGFORM" et chaque validation Ajouter un chèque ngform.submitd
ive a essayé d'ajouter Boolean mais cela ne fonctionne pas Stackblitz.com/edit/angular-ivy-9jpk7e
Vous devez ajouter type = "Soumettre" car si nous n'ajoutons pas de type, il sera par défaut, il sera type = "bouton"