Я новичок в angular и запутался в переключателе обработки в массиве формы в массив формы. Я хочу создать тест, такой как вопросный лист MCQ, но я не могу обработать переключатель в нем. когда я выбираю кнопку из 2-го вопроса, она отменяет выбор переключателя 1-го вопроса. Вот что я пробовал до сих пор //.ts файл
import {
Component,EventEmitter,Input,OnDestroy,OnInit,Output
} from "@angular/core";
import {
AbstractControl,FormArray,FormBuilder,FormGroup,Validators
} from "@angular/forms";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"]
})
export class AppComponent {
public form: FormGroup;
imageName: any;
formData: FormData = new FormData();
importError: any;
queImage: boolean;
importErrorMsg: any;
constructor(private fb: FormBuilder) {
this.form = fb.group({
title: ["", Validators.compose([Validators.required])],
question: fb.array([])
});
}
ngOnInit() {
this.addQuestion();
}
addOption(queIndex: number) {
console.log("queIndex", queIndex, "-------");
let fg = this.fb.group({
optionText: ["", Validators.compose([Validators.required])],
answer: [""]
});
(<FormArray>(
(<FormGroup>(
(<FormArray>this.form.controls["question"]).controls[queIndex]
)).controls["queOption"]
)).push(fg);
}
deleteOption(queIndex: number, index: number) {
console.log("queIndex", queIndex, "-------", "index", index);
(<FormArray>(
(<FormGroup>(
(<FormArray>this.form.controls["question"]).controls[queIndex]
)).controls["queOption"]
)).removeAt(index);
}
addQuestion() {
let fg = this.fb.group({
queText: ["", Validators.compose([Validators.required])],
image: [""],
queOption: this.fb.array([])
});
(<FormArray>this.form.get("question")).push(fg);
let queIndex = (<FormArray>this.form.get("question")).length - 1;
this.addOption(queIndex);
}
deleteQuestion(index: number) {
(<FormArray>this.form.get("question")).removeAt(index);
}
onTournamentLogoChange(event) {
var fileList_1: FileList = event.target.files;
this.imageName = fileList_1[0].name;
var fileExtension = this.imageName.replace(/^.*\./, "");
if (
fileExtension == "jpg" || fileExtension == "JPG" ||
fileExtension == "jpeg" || fileExtension == "jpe" ||
fileExtension == "JPE" || fileExtension == "JPEG" ||
fileExtension == "png" || fileExtension == "PNG" ||
fileExtension == "bmp" || fileExtension == "BMP" ||
fileExtension == "svg" || fileExtension == "SVG"
) {
this.importError = false;
this.queImage = true;
} else {
this.importError = true;
this.imageName = "";
this.importErrorMsg = "File Should be a Valid image file.";
this.queImage = false;
return false;
}
this.formData.delete("image");
this.formData.append("image", fileList_1[0], this.imageName);
}
onCancle() {
this.form.reset();
console.log(this.form, this.form.value);
}
onSubmit(formValue) {
console.log(formValue);
}
ngOnDestroy(): void {}
}
// HTML Файл
<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
<div class="container">
<p class="heading text-center">User Directory</p>
<button type="submit" >submit</button>
<div class="mt-3">
<label>Quiz Name :</label>
<input type="text" placeholder="Quiz title" formControlName="title"/>
</div>
<div class="mt-3">
<button type="button" (click)="addQuestion()">New Question</button>
</div>
</div>
<div formArrayName="question">
<div class="container user-container form-group"
*ngFor="let question of form.controls.question.controls; let i = index" formGroupName="{{i}}">
<div class="row d-flex justify-content-center">
<button *ngIf="form.controls.question.controls.length > 1" type="button" (click)="deleteQuestion(i)">Delete Question</button>
</div>
<div class="row">
<div class="col-6">
Question
<input class="form-group" formControlName="queText" placeholder="Question">
</div>
<div class="col-md-6">
<input type="file" formControlName="image" accept="image/*"
(change)="onImageChange($event)"
/>
</div>
</div>
<div class="row mt-3">
<div class="col-8">
Options
</div>
</div>
<div class="row" formArrayName="queOption">
<fieldset id="i">
<div class="col-6"
*ngFor="let option of question.controls.queOption.controls; let j = index"
formGroupName="{{j}}">
<div class="container user-container">
<div class="row">
<div class="col-8">
<input formControlName="optionText" placeholder="Option"/>
<input name="answer" [id]="i" [value]="j"
formControlName="answer" type="radio"
/>
</div>
<div class="col-4 text-right">
<button *ngIf="question.controls.queOption.controls.length > 1"
type="button" (click)="deleteOption(i,j)">
Delete
</button>
</div>
</div>
</div>
</div>
<div class="col-6 text-center">
<button type="button" (click)="addOption(i)">Add New</button>
</div>
</fieldset>
</div>
</div>
</div>
</form>
Здесь я динамически добавляю вопрос, а в конкретном вопросе я добавляю опции Dynami c, но проблема с переключателем, который я использовал в этой опции. он не работает должным образом, я хочу, чтобы в 1-м вопросе я мог выбрать только 1 переключатель, и когда я добавляю второй вопрос, на 1-й вопрос не должен влиять 2-й, когда я выбираю вариант из 2-го вопроса, но в В моем случае отмените выбор 1-го вопроса.
Вы можете напрямую отредактировать мой код в stackblitz.com, чтобы увидеть результат. Я попробовал все, изменив id, name, value attr, но ничего не работает должным образом. Пожалуйста, ведите меня, где я делаю ошибку. Спасибо.