Проверка «Требуется» не работает с radiobtn при использовании ngFor в реактивных формах
У меня есть динамическая реактивная угловая форма, которая создает формы и динамически заполняет внутри нее вопросы в соответствии с типами вопросов, полученными из базы данных. проблема в том, что требуемая проверка (встроенная проверка HTML5 ngNativeValidate) не работает, когда я добавляю ее внутри цикла * ngFor.
в моем конструкторе форм у меня есть эта часть
<div class = "row" *ngSwitchCase = "'radiobtn'">
<legend class = "col-form-label col-sm-6 pt-0">{{question.label}}</legend>
<div class = "col-sm-6">
<div class = "form-check" *ngFor = "let opt of question.options; let i = index">
<label class = "form-check-label" [attr.for] = "question.key+opt.key">
<input class = "form-check-input" type = "radio" [name] = "question.key" [formControlName] = "question.key"
[id] = "question.key+opt.key" [value] = "opt.key" required />
{{opt.value}}
</label>
</div>
</div>
</div>
У меня есть ngNativeValidate в теге формы и new FormControl(question.value || '', Validators.required) в конструкторе FormGroup.
Предполагается, что этот код применяет необходимую проверку проверки, но он не работает. когда я удаляю цикл for и делаю его статическим, проверка работает. в чем здесь причина.
Примечание: моя версия Angular — 10.
@NarenMurali, вы сказали, что я смешиваю формы, управляемые шаблонами, и реактивные формы, потому что у меня есть и formControlName, и ngModel? да, но даже когда я удаляю ngModel, он все равно не работает. Я отредактирую свой вопрос, чтобы избежать конфликтов
Да, но для проверки требуется stackblitz, это тоже может быть ошибка, но нужно проверить
что-то вроде этого ссылка stackblitz
Ответы 2
При работе с native validations всегда отдавайте предпочтение Формам на основе шаблонов, потому что если вы выберете шаблон на основе шаблона, добавленная вами проверка не будет запускать собственные проверки HTML.
HTML:
<div class = "jumbotron text-center">
<h1 class = "display-5">Radio Buttons in Angular</h1>
</div>
<div class = "container">
<div class = "row custom-wrapper">
<div class = "col-md-12">
<!-- Form starts -->
<form (ngSubmit) = "onSubmit()" #actorForm = "ngForm" ngNativeValidate>
<!-- Gender -->
<div class = "group-gap">
<h5 class = "mb-3">Gender</h5>
<div class = "d-block my-3">
<div *ngFor = "let gender of questions[0].genders; let i = index">
<label [for] = "gender">
<input
type = "radio"
name = "gender"
[id] = "gender"
[(ngModel)] = "genderVal"
[value] = "gender"
required
/>
{{ gender }}
</label>
</div>
</div>
</div>
<!-- Submit Button -->
<button type = "submit" class = "btn btn-danger btn-lg btn-block">
Submit
</button>
</form>
<!-- Form ends -->
</div>
</div>
</div>
ТС:
import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
@ViewChild('actorForm') registrationForm: NgForm;
isSubmitted = false;
questions: { genders: string[] }[] = [{ genders: ['Male', 'Female'] }];
genderVal = '';
// Submit Registration Form
onSubmit() {
this.isSubmitted = true;
alert(JSON.stringify(this.registrationForm.valid));
if (!this.registrationForm.valid) {
return false;
} else {
alert(JSON.stringify(this.registrationForm.value));
}
}
}
Демо-версия Stackblitz
Но вот пример реактивных форм, вот что вам нужно знать.
Когда вы добавляете проверку, соответствующая директива также должна присутствовать в HTML, поэтому у нас есть обязательный атрибут.
HTML:
<div class = "jumbotron text-center">
<h1 class = "display-5">Radio Buttons in Angular</h1>
</div>
<div class = "container">
<div class = "row custom-wrapper">
<div class = "col-md-12">
<!-- Form starts -->
<form
[formGroup] = "registrationForm"
(ngSubmit) = "onSubmit()"
ngNativeValidate
>
<!-- Gender -->
<div class = "group-gap">
<h5 class = "mb-3">Gender</h5>
<div class = "d-block my-3">
<div *ngFor = "let gender of questions[0].genders; let i = index">
<label [for] = "gender">
<input
type = "radio"
name = "gender"
[id] = "gender"
formControlName = "gender"
[value] = "gender"
required
/>
{{ gender }}
</label>
</div>
</div>
</div>
<!-- Submit Button -->
<button type = "submit" class = "btn btn-danger btn-lg btn-block">
Submit
</button>
</form>
<!-- Form ends -->
</div>
</div>
</div>
ТС:
import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
isSubmitted = false;
questions: { genders: string[] }[] = [{ genders: ['Male', 'Female'] }];
constructor(public fb: FormBuilder) {}
/*########### Form ###########*/
registrationForm = this.fb.group({
gender: ['', [Validators.required]],
});
// Submit Registration Form
onSubmit() {
this.isSubmitted = true;
alert(JSON.stringify(this.registrationForm.valid));
if (!this.registrationForm.valid) {
return false;
} else {
alert(JSON.stringify(this.registrationForm.value));
}
}
}
Демо-версия Stackblitz
Вот мой исходный код, который не работает [ссылка]stackblitz.com/edit/…
@MohammadAM В своем ответе я поделился решением для шаблонного и реактивного решения, пожалуйста, просмотрите его и дайте мне знать, если возникнут какие-либо сомнения.
Да, ваш пример отлично работает с реактивными формами, но он перестает работать, когда я начинаю динамически связывать атрибуты name и formControlName. вы можете увидеть это в моем обновленном коде здесь [stackblitz.com/edit/…
@MohammadAM, даже если оно динамическое, заданное вами имя должно совпадать с тем, которое вы установили в группе построителя форм, и в этом проблема.
да, они совпадают [name] = "question.key"[formControlName] = "question.key" и вот код TS `group[question.key] = new FormControl(question.value || '', Validators.required); ` но все еще не работает
@MohammadAM Спасибо за ваше терпение, это похоже на ошибку, не стесняйтесь поднимать проблему с github на официальной странице angular на github.
не беспокойтесь и спасибо за вашу помощь. только что опубликовал проблему на странице Angular на github
Для input[radio] должны быть установлены как [name], так и [attr.name].
пожалуйста, поделитесь простым стекблицом с возникшей проблемой. Я вижу, что вы неправильно реализуете форму, вы смешиваете управляемые шаблонами и реактивные формы.