Reactiveform For Dynamically Updated Form Entries

How to check status of myform in component to check if all the fields are filled or not? HTML:

Solution 1:

If you use ReactiveForm, you need use a FormArray A FormArray can be of FormControl or a FormGroup

FormArray of FormControls

constructor(private fb:FormBuilder) {}
ngOnInit() {
    //We create an array of FormControl, each question a FormControl
    let data:FormControl[]=this.questions.map(q=>new FormControl());

    this.myform=this.fb.group({
      questions:new FormArray(data)
    })
}
//the .html
<!--we use *ngIf to show the form only when we create the form--><div *ngIf="myform"  [formGroup]="myform"><!--we iterate to myForm.get('questions').controls --><!--we use our variable "questions" to show the label and options--><div *ngFor="let question of myform.get('questions').controls;let i=index"><label>{{questions[i].question}}</label><selectrequired [formControl]="question" ><optionvalue="null"disabled="disabled">Option</option><option *ngFor="let option of questions[i].options">{{option}}</option></select></div></div><!--just for check-->
{{myform?.value |json}}

If we use an array of formGroup we change some things

constructor(private fb:FormBuilder) {}
ngOnInit() {
    //we create and array of FormGroupletdata2:FormGroup[]=this.questions.map(q=>this.fb.group({
      option:null
    }));

    this.myform2=this.fb.group({
      questions:newFormArray(data2)
    })
}
<div *ngIf="myform2"  [formGroup]="myform2">
  <!--see that we say to Angular the "formArrayName" -->
  <divformArrayName="questions"><div *ngFor="let question of myform2.get('questions').controls;
        let i=index" [formGroupName]="i"><!--don't forget formGroupName--><label>{{questions[i].question}}</label><!--the select use formControlName, our array is an array of FormGroup--><selectrequiredformControlName="option" ><optionvalue="null"disabled="disabled">Option</option><option *ngFor="let option of questions[i].options">{{option}}</option></select></div></div>
  </div>
  {{myform2?.value |json}}

Aclaration:@FrontEndDeveloper. One thing is the array question that we use to make the questions.(Perhafs I must be choose other names to the variables), other thing is the value of the form. The value of myform1={questions:["20","1"]}, the value of myform2={questions:[{option:"20"},{option:"2"}]}.

When we create an array of FormControl (or an array of FbGroup) I used map, equally I can do some like

let data:FormControl[]=[];
data.push(new FormControl());
data.push(new FormControl());

or

let data2:FormGroup[]=[];
data2.push(this.fb.group({
          option:null
        }));
data2.push(this.fb.group({
          option:null
        }));

Generally we have some data to initialize the form. (an object with some data) that we get from a dbs

//Imagine we have mydata{name:"A",options=["20","1"]}
//we can map this data to create the form
let data:FormControl[]=this.mydata.options.map(q=>new FormControl(q));
//or
   let data2:FormGroup[]=this.mydata.options.map(q=>this.fb.group({
          option:q
        }));

//Imagine we have mydata{name:"A",options=[{option:"20"},{option:"1"}]}
//we can map this data to create the form
let data:FormControl[]=this.mydata.options.map(q=>new FormControl(q.option));
//or
   let data2:FormGroup[]=this.mydata.options.map(q=>this.fb.group({
          option:q.option
        }));

Solution 2:

This would help you to understand reactive form basic functionalities.

https://stackblitz.com/edit/objects-equality-check-edhyk5?file=src/app/app.component.ts

It will help to understand: 1. FormBulder, 2. FormGroup, 3. Form Value changes etc.

Share