Блог

html-файл

 <form #form="ngForm" [formGroup]="sectionForm" #formDirective="ngForm" (ngSubmit)="setSections(sectionForm.value,null,formDirective)">


  <div fxLayout="row wrap" style="padding: 0px 16px;">
    <mat-checkbox class="example-margin" [(ngModel)]="isIndividualMark" [ngModelOptions]="{standalone: true}" (ngModelChange)="modelChangeFn($event)">
      Individual Mark
    </mat-checkbox>
  </div>

  <div formArrayName="questions" style="min-height: 100px;max-height: 100px;overflow: auto;">
    <div fxLayout="row wrap" class="list" *ngFor="let questions of selectedQn  trackBy: let selected_qn_index = index;">

      <div id="form" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="20" fxLayoutAlign="end center">

        <span>
          <mat-form-field *ngIf="isIndividualMark" style="text-align: right;width: 25px;">

            <input type="number" maxlength="3" min="1" matInput [(ngModel)]="questions.qn_mark" [formControlName]="selected_qn_index">
            <!-- <input min="0" type="number"  matInput formControlName="mark_ind_qn">
                        <mat-error>{{error}}</mat-error> -->
            <mat-error *ngIf="!questions.qn_mark || questions.qn_mark==0">
              {{"error"}}
            </mat-error>

          </mat-form-field>
        </span>

      </div>
    </div>
  </div>

  <div fxLayout="row wrap" style="padding: 16px;" fxLayoutAlign="end center">
    <div style="font-size: 16px;font-weight: 900;">
      <span style="padding: 5px;">
        <button mat-raised-button color="accent" [disabled]="!sectionForm.valid">
          Add Section
        </button>
      </span>
    </div>
  </div>
</form>
 

Тс

 this.sectionForm = new FormGroup({
  name: new FormControl('', [Validators.required]),
  instruction: new FormControl('', [Validators.required]),
  mark_each_qn: new FormControl(),
  questions: new FormArray([])

});
 

это ошибка, я новичок в angular, кто-нибудь, пожалуйста, помогите мне решить эту проблему. есть ли что-то, что я пропустил в этом коде?

ОШИБКА Ошибка: Не удается найти элемент управления с путем: вопросы -> 0 в _throwError (формы.js:3357)в setUpControl (формы.js:3181)в FormGroupDirective.addControl (формы.js:7345)в formControlName._setUpControl (формы.js:8070)

1.-При использовании реактивных форм не используйте [(ngModel)] (допустима метка «isIndividualMark», потому что она не относится к группе форм

2.-Набор форм может быть набором форм групп или набором формконтролей

Значение FormArray для групп форм будет мешать

 [{id:1,name:"one"},{id:2,name:"two"}]
 

Значение FormArray для FormControls будет мешать

 ["one","two"]
 

3.-Когда у нас есть FormArray, мы используем геттер для возврата FormArray

 get questionArray(){
   return this.sectionForm.get('questions') as FormArray
}
 

Ну, у вас есть набор форм управления формами, так что способ всегда один и тот же

 <!--a div with formArrayName-->
<div formArrayName="questions">
    <!--iterating over the formArray.controls using the getter-->
    <div *ngFor="let control of questionArray.controls;let i=index">
        <!--you can use the "i" to get the value of an array,e.g.-->
        {{label[i]}}
        <!--a input with formControlName-->
        <input [formControlName]="i">
    
    </div>
</div>
 

Кстати: если у нас есть FormArray FormGroup, то способ немного другой

 <!--a div with formArrayName-->
<div formArrayName="questions">
    <!--iterating over the formArray.controls using the getter-->
        and use [formGroupName]
    <div *ngFor="let control of questionArray.controls;let i=index"
            [formGroupName]="i">

        <!--the inputs with formControlName, see that in this case 
            is not enclosed by []-->
        <input formControlName="id">
        <input formControlName="name">
    
    </div>
</div>
 

Обновите, если мы хотим придать значение группе форм, которую мы используем, значение пути, например

 this.sectionForm = new FormGroup({...})
this.sectionForm.pathValue(myObject) //<--be carefull if we has a formArray
 

Проблема с значением пути (или значением набора) заключается в том, что нам нужно добавить так много элементов в массив форм, поэтому нам нужно сделать что-то вроде

 this.sectionForm = new FormGroup({...})
this.myobject.questions.forEach(_=>{
    this.questionArray.push(new FormControl())
}
this.sectionForm.pathValue(myObject) //Now yes!
 

Ну, существует еще один вариант, который мне лично нравится,- это создать функцию, которая возвращает группу форм-с данными или со значениями по умолчанию. Некоторые, как

 createGroup(data:any=null)
    data=data || {name:'',instruction:'',mark_each_qn:false,questions:null}
    return new FormGroup({
      name: new FormControl(data.name, [Validators.required]),
      instruction: new FormControl(data.instruction, [Validators.required]),
      mark_each_qn: new FormControl(data.mark_each_qn),
      questions: new FormArray(data.questions?
                  data.question.map(x=>new FormControl(x)):
                  [])
    });
 

Видите, что если у нас есть объект, мы можем сделать

 this.sectionForm=this.createGroup(myObject)
 

И если вам нужна пустая группа форм

 this.sectionForm=this.createGroup()