динамическое изменение текста на основе значения флажка - PullRequest
Новая
       26

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

0 голосов
/ 27 сентября 2019

с использованием FormArray У меня был флажок привязки на моем компоненте, по умолчанию label флажок выберите , когда я щелкнул checbox, label изменится на выбран для каждогофлажка (должен быть), я также получил кнопку selectAll, которая изменяет значение всех флажков на true и изменяет текст на selected , моя проблема:

  • когда я выбираю только один флажок, изменение label также будет действовать и для другого флажка
  • , когда у меня был флажок selectAll, все метки флажка изменятся на selected , тогда, если я не выбрал отдельный флажок, это должно быть изменение label на выберите

это то, что я пытался:

HTML-файл 

<code><div *ngIf="isShowResponse">
    <p>Inquiry Response</p>
    <form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()">
        <ng-container formArrayName="receivedSummons" *ngFor="let summon of formReceivedSummons.controls; let i = index">
            <ng-container [formGroupName]="i">
                <input type="checkbox" formControlName="isChecked"
        (change)="checkedState(summon)">
            {{ summonText }}
           </ng-container>
       </ng-container>
   </form>
<!-- <pre>{{form.value | json}}
-> Выбрать все

ts файл 

    checkedState(summon) {
    summon.checked = !summon.checked;
    this.summonText = summon.checked === true ? 'selected' : 'select';
  }

  selectAll() {
    this.formReceivedSummons.controls.map(value => value.get('isChecked').setValue(true));
    return this.summonText = 'selected';
  }

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

Ответы [ 2 ]

0 голосов
/ 27 сентября 2019

Я внес некоторые изменения, вы можете попробовать это:

HTML 

<code><div *ngIf="isShowResponse">
<p>Inquiry Response</p>
<form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()">
    <ng-container formArrayName="receivedSummons" *ngFor="let summon of formReceivedSummons.controls; let i = index">
        <ng-container [formGroupName]="i">
            <input type="checkbox" [checked]="summon.checked" formControlName="isChecked"
    (change)="checkedState(summon)">
       {{ summon.checked === true ? 'selected' : 'select' }}
    </ng-container>
 </ng-container>
</form>
 <!-- <pre>{{form.value | json}}
-> Выбрать все

В функциях: 

selectAll() {
 this.formReceivedSummons.controls.map((summon: any) => {
  summon.checked = true;
 });
}
checkedState(summon) {
 summon.checked = !summon.checked;
}
0 голосов
/ 27 сентября 2019 

    Inquiry Response
    
        
            
                
  {{ summon.get('isChecked').value ? 'selected' : 'select' }}
      
    

<!-- <pre>{{form.value | json}}
-> Выбрать все

https://stackblitz.com/edit/angular-43suh3?file=src/app/inquiry-response/inquiry-response.component.html

...