I have problems with a form that's always invalid. Thus I type this command in this web browser to see which fields are invalid.
document.getElementsByClassName('ng-invalid');
but the HTMLCollection is empty (length 0).
I don't understand why?
Here is my form:
<div class="container rounded bg-white mt-5 mb-5">
<form [formGroup]="myForm" name="myForm" autocomplete="off" novalidate (ngSubmit)="updateUserAccount(myForm.value)">
<div class="row">
<div class="col-md-3 border-right">
<div class="d-flex flex-column align-items-center text-center p-3 py-5">
<img class="rounded-circle mt-5" width="150px" src="https://st3.depositphotos.com/15648834/17930/v/600/depositphotos_179308454-stock-illustration-unknown-person-silhouette-glasses-profile.jpg">
<span class="font-weight-bold">{{user?.firstName}} {{user?.lastName}}</span>
<span class="text-black-50">{{user?.mail}}</span>
<span></span>
</div>
</div>
<div class="col-md-5 border-right">
<div class="p-3 py-5">
<div class="d-flex justify-content-between align-items-center mb-3">
<h4 class="text-right color-secondary">Profile</h4>
<div class="row">
<div class="col-md-12 align-ietms-center">
<button class="btn btn-outline-primary" type="submit">Liste utilisateurs</button>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-md-12">
<app-gender name="gender" id="gender" [formGroup]="myForm" [selectedValue]="user?.gender?.description">
<em *ngIf="validateControl('gender') && hasError('gender', 'required')">Sélectionnez un genre</em>
</app-gender>
</div>
</div>
<div class="row mt-2">
<div class="col-md-6"><label class="labels">Nom</label><input type="text" class="form-control" formControlName="lastname" placeholder="Nom" value="{{user?.firstName}}" >
<em *ngIf="validateControl('lastname') && hasError('lastname', 'required')">Nom obligatoire</em>
</div>
<div class="col-md-6"><label class="labels">Prénom</label><input type="text" class="form-control" formControlName="firstname" value="{{user?.lastName}}" placeholder="Prénom" >
<em *ngIf="validateControl('firstname') && hasError('firstname', 'required')">Prénom obligatoire</em>
</div>
</div>
<div class="row mt-3">
<div class="col-md-12 mt-2"><label class="labels">Nom d'utilisateur</label><input type="text" class="form-control" formControlName="username" placeholder="Nom d'utilisateur" value="{{user?.userName}}" >
<em *ngIf="validateControl('username') && hasError('username', 'required')">Nom d'utiliateur obligatoire</em>
</div>
<div class="col-md-12 mt-2"><label class="labels">Mail</label><input type="text" class="form-control" formControlName="mail" placeholder="Mail" value="{{user?.mail}}" >
<em *ngIf="validateControl('mail') && hasError('mail', 'required')">Mail obligatoire</em>
</div>
<div class="col-md-12 mt-2"><label class="labels">Login</label><input type="text" class="form-control" formControlName="login" placeholder="Login" value="{{user?.login}}" >
<em *ngIf="validateControl('login') && hasError('login', 'required')">Login obligatoire</em>
</div>
<div class="col-md-12 mt-2"><label class="labels">Password</label><input type="text" class="form-control" formControlName="password" placeholder="Password" value="{{user?.password}}" >
<em *ngIf="validateControl('password') && hasError('password', 'required')">Mot de passe obligatoire</em>
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<label class="labels">Type d'utilisateur</label>
<app-useraccount-type name="useraccountType" id="useraccountType" [formGroup]="myForm" [selectedValue]="user?.userAccountType?.shortDescription">
<em *ngIf="validateControl('useraccountType') && hasError('useraccountType', 'required')">Mot de passe obligatoire</em>
</app-useraccount-type>
</div>
</div>
<div class="mt-5 text-center"><button class="btn btn-primary profile-button" type="submit">Sauvegarder</button></div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</form>
</div>
and the validation method which is basic for the moment:
private getFormFields() {
this.myForm = new FormGroup({
firstname: new FormControl('', [Validators.required]),
lastname: new FormControl('', [Validators.required]),
mail: new FormControl(''),
gender: new FormControl(''),
password: new FormControl(''),
username: new FormControl(''),
login: new FormControl(''),
useraccountType: new FormControl('')
});
}
I also use two child components but I commented them and it seems that it's not the problem.
In fact when I submit my form, I check this:
console.log(myForm.value);
and it's empty.
CodePudding user response：
The following stackblitz forked from the comments is working as intended, Some changes were required in the typescript code to fix the issues.
Few key points, the updateUserAccount(myForm.value) call was checking if the value had the key valid and not the form itself updateUserAccount(myForm)
public myForm: FormGroup;
updateUserAccount = (myForm) => {
// ...
if (myForm.valid) {
console.log('VALID');
} else {
// ...
console.log('Is not Valid');
}
}
As stated in the comments, calling the validateControl('xyz') in the ngIf was not needed, solely checking hasError('xyz') was enough.
<em *ngIf="validateControl('firstname') && hasError('firstname', 'required')">Prénom obligatoire</em>
Changed to
<em *ngIf="hasError('firstname', 'required')">Prénom obligatoire</em>
hasError = (controlName: string, errorName: string) => {
return this.myForm.controls[controlName].hasError(errorName);
};
Used the updateValueAndValidity() function of the AsbstractControl to check validity on click when needed, although the FormControl does it onChange already
Using document.getElementsByClassName('ng-invalid'); native js selectors shouldn't be necessary when we can use the FormGroup.valid property directly, being cheaper to compute and easier to access from angular code
CodePudding user response：
Problem is solved with the solution of Simplicity's_Strength. Thanks for your help.