ReactiveForm per voci di modulo aggiornate dynamicmente

Come verificare lo stato di myform nel componente per verificare se tutti i campi sono compilati o meno?

HTML:

Option {{option}}

Domanda JSON proveniente dall’API:

  this.questions = [ { question: 'What is your age?', options: ['20', '30', '40'] }, { question: 'How much quantity?', options: ['1','2','3'] }] 

Se si utilizza ReactiveForm, è necessario utilizzare un FormArray Un FormArray può essere di FormControl o FormGroup

FormArray di 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  
{{myform?.value |json}}

Se usiamo un array di formGroup cambiamo alcune cose

 constructor(private fb:FormBuilder) {} ngOnInit() { //we create and array of FormGroup let data2:FormGroup[]=this.questions.map(q=>this.fb.group({ option:null })); this.myform2=this.fb.group({ questions:new FormArray(data2) }) } 
{{myform2?.value |json}}

Aclaration: @FrontEndDeveloper. Una cosa è la domanda dell’array che usiamo per fare le domande. (Perhafs I deve scegliere altri nomi per le variabili), l’altra cosa è il valore della forma. Il valore di myform1 = {domande: [“20”, “1”]}, il valore di myform2 = {domande: [{opzione: “20”}, {opzione: “2”}]}.

Quando creiamo una matrice di FormControl (o una matrice di FbGroup) ho usato la mappa, allo stesso modo posso fare qualcosa di simile

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

o

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

Generalmente disponiamo di alcuni dati per inizializzare il modulo. (un object con alcuni dati) che otteniamo da un 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 })); 

Questo ti aiuterà a capire le funzionalità di base della forma retriggers.

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

Aiuterà a capire: 1. FormBulder, 2. FormGroup, 3. Modifiche al valore della forma, ecc.