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

Question

Я отмечен mat-chips отмечен не отмеченным, но для определенной области (только метки щелкают) только нажмите, чтобы проверить непроверенную работу, теперь я хочу щелкнуть в любом месте, где на мат-чипах он отмечен, ниже HTML-кода, который я использую ,

<mat-chip-list formControlName="sample">  
     <mat-chip  mat-raised-button>
         <div mat-card-avatar class=""></div>  
                  <input class="checkbox" type="checkbox" 
                        [checked]="checked" value="sample" 
                        id="sample" name="sample"> 
                  <label for="sample">sample</label>
        </mat-chip>
</mat-chip-list>

см. Мой мат-чип

Answer 1

Если я правильно понял ваш вопрос, то вы хотите иметь возможность щелкнуть в любом месте на мат-чипе, чтобы изменить состояние вашего флажка.

Поскольку вы уже связываете свойство checked вашего ввода с полем с именем checked в вашем компоненте, все, что вам нужно сделать, - это зарегистрировать обработчик события click на вашем мат-чипе, который модифицирует поле checked. В дополнение к этому я изменил привязку с проверкой на одностороннем пути на привязку с двумя путями. Поскольку возникла проблема с несколькими событиями щелчка, я добавил (click)='$event.stopPropagation()' к флажку.

Как-то так должно работать:

<mat-chip-list formControlName="sample"> 
 <mat-chip  mat-raised-button (click)="checked=!checked">
     <div mat-card-avatar class=""></div>  
              <input class="checkbox" type="checkbox" 
                      [(ngModel)]='checked'
                    id="sample" name="sample" (click)='$event.stopPropagation()'>
              <label for="sample">sample</label>
    </mat-chip>

Ссылка на живой пример Stackblitz