Блог

нужна ваша помощь

У меня есть массив значений флажков

 colors = ['Black', 'Red', 'White', 'Blue', 'Yellow', 'Grey'];
  

Реализовал их в HTML

 <div *ngFor="let color of colors; let i = index" class="checkbox">
        <label>
          <input type="checkbox" class="colors" [value]="color" (change)="addCheckboxData($event)" />
          {{ color }}
        </label>
      </div>
  

Итак, это выглядит так:

У меня есть массив значений, которые следует проверять при загрузке страницы

   checkedValues = ['Black', 'White', 'Grey'];
  

Я добавил их в formarray

 color: this._formBuilder.array(this.checkedValues),
  

Это работает, и color formarray имеет значения, как в массиве checkedValues:

Но флажки не установлены, поэтому я хочу, чтобы эти значения отображались как отмеченные. Как я могу это сделать? Спасибо

вам нужно передать массив логических значений

 color: this._formBuilder.array(
              this.colors.map(x=>this.checkedValues.indexOf(x)>=0)),
  

И управляйте формой, как

 <form [formGroup]="form">
    <input formControlName="name">
    <div formArrayName="color">
        <div *ngFor="let control of colorFormArray.controls;let i=index">
            <input type="checkbox" [formControlName]="i">{{colors[i]}}
      </div>
        </div>
</form>
<pre>
{{form?.value|json}}
</pre>
  

Ну, вы видите, что «color» получает в качестве значения массив логических значений, например [true,false,true,false,false,true]

И вы хотите, чтобы этот цвет получал массив с цветами, поэтому идея заключается в том, чтобы иметь FormControl, а не FormArray, и использовать [ngModel] и (ngModelChange). Поскольку мы используем [ngModel] внутри FormGroup, нам нужно использовать [ngModel]="{standalone:true}"

Посмотрите форму и .html

 this.form2=this._formBuilder.group({
  name:[],
  color:[this.checkedValues] //<--see that is a simple FormControl
})

<form [formGroup]="form2">
        <div *ngFor="let col of colors;let i=index">
            <input type="checkbox" 
           [ngModel]="form2.get('color').value amp;amp; form2.get('color').value.indexOf(col)>=0" 
           (ngModelChange)="colorChange($event,i)"
           [ngModelOptions]="{standalone:true}"
                 
      >{{colors[i]}}
        </div>
</form>
  

[ngModel] имеет значение true или false в зависимости от form2.get('color').value.indexOf

Функция colorChange получила значение флажка и индекс

   colorChange(checked:boolean,index:number)
  {
    const checkedColors=this.form2.get('color').value || [] //the actual value of the formControl
                                                            //if is null an empty array
    const color=this.colors[index];  //the color selected

    ///if is checked and is not in the array
    if (checked amp;amp; checkedColors.indexOf(color)<0)
    {
      //concatenate to the value the new color
      //and sort the result array 

      const orderColors=[...checkedColors,color]
                  .sort((a,b)=>this.colors.indexOf(a)-this.colors.indexOf(b))

      //make a setValue
      this.form2.get('color').setValue(orderColors)
    }

    //if not checked

    if (!checked)
      this.form2.get('color').setValue(checkedColors.filter(x=>x!=color))

  }
  

В стекблите у вас есть два подхода

ПРИМЕЧАНИЕ: В этом втором подходе мы можем сделать так, что если нет выбора цвета, значение элемента управления становится нулевым. Это позволяет нам использовать Validators.required , например, только изменить функцию colorChange

   colorChange(checked:boolean,index:number)
  {
        ...

    if (!checked)
    {
      const result=checkedColors.filter(x=>x!=color)
      this.form2.get('color').setValue(result.length>0?result:null)
    }

  }