#angular
Вопрос:
У меня проблемы с формой, которая всегда недействительна. Поэтому я набираю эту команду в этом веб-браузере, чтобы увидеть, какие поля недопустимы.
document.getElementsByClassName('ng-invalid');
но HTMLCollection он пуст (длина 0).
Я не понимаю, почему?
Вот моя анкета:
<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') amp;amp; 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') amp;amp; 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') amp;amp; 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') amp;amp; 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') amp;amp; 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') amp;amp; 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') amp;amp; 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') amp;amp; 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>
и метод проверки, который является основным на данный момент:
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('')
});
}
Я также использую два дочерних компонента, но я их прокомментировал, и, похоже, проблема не в этом.
На самом деле, когда я отправляю свою форму, я проверяю это:
console.log(myForm.value);
и он пуст.
Комментарии:
1. Не рекомендовал бы использовать validateControl(‘xyz’) внутри функции ngIf, так как она будет часто вызываться, чтобы быть точным, при каждом рендеринге. И это еще до того, как у пользователя появится возможность ввести имя или фамилию, это может быть причиной того, что у вас с самого начала был неверный. Действительность формы можно проверить при обмене, чтобы быть более ленивым
2. Если вы можете предоставить минимальный пакет с вашим отсутствующим машинописным текстом, мы могли бы помочь в дальнейшем
3. Спасибо за вашу помощь. Вот ссылка на ссылку stackblitz. Некоторые занятия отсутствуют.
4. stackblitz.com/edit/… Удалил все внешние ссылки и сумел запустить вышеупомянутый stackblitz, также внес несколько изменений, срок действия формы правильный, я не вижу никаких проблем
5. Пожалуйста, предоставьте весь соответствующий код здесь для переполнения стека, а не только для Stackblitz. @Simplicity_strength Ваш ответ не будет иметь никакого смысла для будущих посетителей, если эта ссылка на Stackblitz будет удалена или пользователь не сможет получить к ней доступ.
Ответ №1:
Следующий раздел stackblitz, разветвленный из комментариев, работает должным образом, для устранения неполадок в коде машинописи потребовались некоторые изменения.
Несколько ключевых моментов: updateUserAccount(myForm.value) вызов проверял, является ли значение допустимым ключом, а не самой формой updateUserAccount(myForm)
public myForm: FormGroup;
updateUserAccount = (myForm: FormGroup) => {
// ...
if (myForm.valid) {
console.log('VALID');
} else {
// ...
console.log('Is not Valid');
}
}
Как указано в комментариях, звонить validateControl('xyz') в службу *ngIf не требовалось, достаточно было одной проверки hasError('xyz') .
<em *ngIf="validateControl('firstname') amp;amp; hasError('firstname', 'required')">
Prénom obligatoire
</em>
Изменено на
<em *ngIf="hasError('firstname', 'required')">
Prénom obligatoire
</em>
hasError = (controlName: string, errorName: string) => {
return this.myForm.controls[controlName].hasError(errorName);
};
Использовал updateValueAndValidity() функцию AsbstractControl проверки валидности при нажатии, когда это необходимо, хотя FormControl уже делает это при обмене
Использование document.getElementsByClassName('ng-invalid'); собственных селекторов js не должно быть необходимым, когда мы можем напрямую использовать свойство FormGroup.valid, поскольку оно дешевле в вычислении и проще в доступе из углового кода
Комментарии:
1. Спасибо за ваши объяснения. Теперь, кажется, все в порядке для проверки, но теперь у меня ошибка 400 с http.put. Метод Api в порядке. Проверил это.
Ответ №2:
Проблема решается с помощью решения простоты и прочности. Спасибо за вашу помощь.