-1

I want to create a user response page for my survey app, i iterate my data through my forms using this code

for (let i = 0; i < this.listFormField.length; i++) {
  let arrayForm = new FormGroup({
    name: new FormControl(this.listFormField[i].name),
    forms: new FormArray([])
  });
  (<FormArray>this.response.get("listForms")).push(arrayForm);
  for (let j = 0; j < this.listFormField[i].form.length; j++) {
    let formField = new FormGroup({
      answer: new FormControl(""),
      title: new FormControl(this.listFormField[i].form[j].title),
      type: new FormControl(this.listFormField[i].form[j].type),
      code: new FormControl(this.listFormField[i].form[j].code),
      options: new FormControl(this.listFormField[i].form[j].options)
    });
    (<FormArray>this.response.controls.listForms["controls"][i].controls.forms).push(
      formField
    );
  }
}

I think it's okay cause it displays my data exactly like i wanted, but i get unexpected behaviour, first is checkbox, like this

all of my checkbox got checked when i click one of them, and in my textarea when i try to type it's out of focus after i type 1 character. if you don't understand what i'm saying, i've recreate my issue here https://angular-ivy-uahtjx.stackblitz.io can someone help me? any thoughts would be very helpful

EDIT

here's my full html code

<form [formGroup]="response">
    <div formArrayName="listForms">
        <div *ngFor="let forms of formArrayControls;let i = index" formGroupName="{{i}}">
            <h5>{{forms.value.name}}</h5>
            <div formArrayName="forms">
                <div *ngFor="let items of forms.value.forms; let j = index" formGroupName="{{j}}">
                    <div *ngIf="items.type == 'textarea'">
                        <p> {{items.title}}</p>
                        <textarea [id]="items.title" [name]="items.title" formControlName="answer" [placeholder]="items.title"></textarea>
                    </div>
                    <div *ngIf="items.type == 'textinput'">
                        <p> {{items.title}}</p>
                        <input type="text" [id]="items.title" [name]="items.title" formControlName="answer" [placeholder]="items.title">
                    </div>
                    <div *ngIf="items.type == 'checkbox'">
                        <p>{{items.title}}</p>
                        <div *ngFor="let option of items.options">
                            <label><input [id]="items.title" [name]="items.title" formControlName="answer" type="checkbox"> {{option}}</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <button (click)="submit()">Submit</button>
</form>
Bernhard
  • 4,855
  • 5
  • 39
  • 70
naoval
  • 338
  • 6
  • 29
  • can you show the html code of the checkboxes ? Seems like you are using `answer: new FormControl("")` and `""` is truthy. – Random Sep 08 '20 at 08:35
  • i've added my html code – naoval Sep 08 '20 at 08:37
  • what i actually wanted is something like this https://forms.gle/nHD7PdySyVFXwYF9A – naoval Sep 08 '20 at 08:42
  • You may try to change `answer: new FormControl("")` with `answer: new FormControl(null)`, because `null` is falsy. – Random Sep 08 '20 at 08:43
  • i've tried it, still get the same result – naoval Sep 08 '20 at 08:44
  • Actually, if you got a list of 3 options, they are all mapped to the same formControl. So when you check one, they will all be checked. You need 1 formControl per option. If you want the `answer` to be a list of selected checkboxes, you'll have to use Control Value Accessors. – Random Sep 08 '20 at 08:47
  • okay, but how about the textarea? – naoval Sep 08 '20 at 08:50
  • textinput and textarea look fine. Do you have any problem with them ? – Random Sep 08 '20 at 09:06
  • when you start typing, it's out of focus after 1 character, that's not normal – naoval Sep 08 '20 at 09:44
  • this is an other problem then. – Random Sep 08 '20 at 09:46
  • i've started it all over again, and i think i need to do different approach, and i think this is better than what u see in this post, here's the link https://stackblitz.com/edit/angular-ivy-uahtjx but i got checkbox selected when i load the page – naoval Sep 08 '20 at 09:54
  • can u help me here ? https://stackoverflow.com/questions/63797930/get-multiple-checkbox-value-as-an-array-in-angular – naoval Sep 08 '20 at 17:11

1 Answers1

0

I see that you are trying to create forms from JSON. There is already a well-maintained library ng-dyanamic-forms. I have used this. it has a lot of good features.

Rakesh Choyal
  • 56
  • 4
  • 1
    actually i've found that too, but idk i'm just too lazy to change my code, so i think for my next update i'll use that, thanks for the suggestion – naoval Sep 08 '20 at 14:24
  • hey can you help me here? https://stackoverflow.com/questions/63797930/get-multiple-checkbox-value-as-an-array-in-angular – naoval Sep 08 '20 at 17:11