Блог

у меня есть форма, созданная с помощью formbuilder. Я создал набор флажков, используя массив, содержащий идентификатор и имя для каждого значения. У меня есть он, возвращающий имя значения, проверенного пользователем, но мне также нужен идентификатор. Существует ли эффективный способ вернуть имя и идентификатор вместе, а не делать это отдельно? так как мне нужен идентификатор с именем, чтобы позже манипулировать данными. Заранее спасибо.

Код TS

 checkboxGroup: FormGroup;
  public colors = [
    {id:-4, name:'red'},
    {id:-3, name:'blue'},
    {id:-2, name:'green'},
    {id:-1, name:'yellow' } 
  ];

//  set the initial value of the checkboxes to false
this.checkboxGroup = this.formBuilder.group({
     colors: this.formBuilder.array(this.colors.map(x => false))
});

// return values marked as true (checked)
const checkboxControl = (this.checkboxGroup.controls. colors as FormArray);
this.subscription = checkboxControl.valueChanges.subscribe(checkbox => {
     checkboxControl.setValue(checkboxControl.value.map((value, i) => value ? this. colors[i].name : false),     
        { emitEvent: false }
)})
 

HTML-код

 <form class="checkbox" [formGroup]="checkboxGroup">
  <ion-card-subtitle>
   <ion-label class="title">
     colors
   </ion-label>
  </ion-card-subtitle>

  <ion-card-content>
    <ng-container *ngFor="let checkbox of colors; let i = index" formArrayName="colors">
      <!--iterate over valence array-->
      <input type="checkbox" class="checkbox inline"[formControlName]="i"/>{{checkbox.name}}
       <br/>
     </ng-container>
     <!-- <button (click)="submit()">Submit</button> -->
   </ion-card-content>
</form>
 

Ваша расширенная модель:

 public colors = [
  {id:-4, name:'red', checked: boolean},
  {id:-3, name:'blue', checked: boolean},
  {id:-2, name:'green', checked: boolean},
  {id:-1, name:'yellow', checked: boolean} 
]; 
 

Добавьте change() метод в свой флажок-тег.

  <ng-container *ngFor="let checkbox of colors; let i = index" 
       formArrayName="colors">
    <!--iterate over valence array-->
    <input type="checkbox" 
     class="checkbox inline"
     [formControlName]="i"
     [checked]="checkbox.checked"
     (change)="onChange(checkbox)"
    />{{checkbox.name}}
        <br />
</ng-container>
 

Добавьте этот метод в свой файл машинописи

 public onChange(checkbox: any): void {
   checkbox.checked = !checkbox.checked;
}
 

Альтернативой является использование ngModel . Тогда вам даже не нужно (change) это мероприятие. Потому ngModel что директива-напрямую записывает проверенное состояние TRUE/FALSE в поле checked текущего объекта.

HTML

 <ng-container *ngFor="let checkbox of colors; let i = index" 
       formArrayName="colors">
    <!--iterate over valence array-->
    <input type="checkbox" 
     class="checkbox inline"
     [formControlName]="i"
     [checked]="checkbox.checked"
     [(ngModel)]="checkbox.checked"
    />{{checkbox.name}}
        <br />
</ng-container>
 

В любом случае теперь у вас есть измененное состояние, записанное непосредственно на ваш объект, когда вы устанавливаете флажок, и его можно отправить вместе с состоянием формы.