ReactiveForm для динамически обновляемых записей форм

Question

Как проверить состояние myform в компоненте, чтобы проверить, заполнены ли все поля или нет?

HTML:

<div  [formGroup]="myform">
  <div *ngFor="let question of questions">
      <label>{{question.question}}</label>
                <select required >
                  <option selected disabled="disabled">Option</option>
                   <option *ngFor="let option of question['options']">{{option}}</option>
                </select>
            </div>
        </div>
</div>

Вопрос JSON от API:

 this.questions =  [
        {
          question: 'What is your age?',
          options: ['20', '30', '40']
        },

        {
          question: 'How much quantity?',
          options: ['1','2','3']
        }]

Answer 1

Это поможет вам понять основные функциональные возможности реактивной формы.

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

Это поможет понять: 1. FormBulder, 2. FormGroup, 3. Изменение значения формы и т. Д.

Answer 2

Если вы используете ReactiveForm, вам нужно использовать FormArray FormArray может иметь форму FormControl или 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>
      <select required [formControl]="question" >
         <option value="null" disabled="disabled">Option</option>
         <option *ngFor="let option of questions[i].options">{{option}}</option>
      </select>
  </div>
</div>
<!--just for check-->
{{myform?.value |json}}

Если мы используем массив formGroup, мы меняем некоторые вещи

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)
    })
}
<div *ngIf="myform2"  [formGroup]="myform2">
  <!--see that we say to Angular the "formArrayName" -->
  <div formArrayName="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-->
        <select required formControlName="option" >
           <option value="null" disabled="disabled">Option</option>
           <option *ngFor="let option of questions[i].options">{{option}}</option>
        </select>
    </div>
  </div>
  </div>
  {{myform2?.value |json}}

Aclaration: @FrontEndDeveloper. Одна вещь - это вопрос массива, который мы используем для создания вопросов. (Perhafs Я должен выбрать другие имена для переменных), другая вещь - это значение формы. Значение myform1 = {questions: ["20", "1"]}, значение myform2 = {questions: [{option: "20"}, {option: "2"}]}.

Когда мы создаем массив FormControl (или массив FbGroup), я использовал map, в равной степени я могу сделать что-то вроде

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

или

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

Обычно у нас есть некоторые данные для инициализации формы. (объект с некоторыми данными), который мы получаем из базы данных

//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
        }));