MatCheckbox protectDefault () и event.checked значение - PullRequest
Новая
       7

MatCheckbox protectDefault () и event.checked значение

0 голосов
/ 17 сентября 2018

Как я могу установить флажок Материал, чтобы он не был отмечен / снят по умолчанию (например, вызов preventDefault() для события), а также получил значение checked из события?

Кажется, я могу выполнить только одно из условий. Используя событие (click), я не могу получить значение флажка, а используя событие (change), я не могу предотвратить изменение значения флажка по умолчанию (я изменю значение флажка только в том случае, если основной HTTP-запрос был успешным).

Stackblitz: https://stackblitz.com/edit/matcheckbox-checked

<mat-checkbox 
  [checked]="checked"   
  (click)="onClick($event)"
>onClick me!</mat-checkbox>

<br/>

<mat-checkbox 
  [checked]="checked"
  (change)="onChange($event); false"
>onChange me!</mat-checkbox>

export class CheckboxOverviewExample {
  checked: boolean = false;

  onClick(event) {
    event.preventDefault();
    console.log('onClick event.checked ' + event.checked);
    console.log('onClick event.target.checked '+event.target.checked);
  }

  onChange(event) {
    // can't event.preventDefault();
    console.log('onChange event.checked '+event.checked);
  }
}

Событие (click) печатает значения undefined, но успешно предотвращает распространение события, событие (change) печатает значение, но распространяет событие.

Связанные проблемы:

Ответы [ 3 ]

0 голосов
/ 17 сентября 2018

Если вы хотите установить флажок вручную @ViewChild, получите ссылку на элемент, а затем используйте флажок, чтобы установить значение true или false, например: 

@ViewChild('ref') ref;

  onClick(bool){
    this.ref._checked=bool;
  }

Пример: https://stackblitz.com/edit/matcheckbox-checked-ybru81

Тот же пример при обработке события: https://stackblitz.com/edit/matcheckbox-checked-a1le6o

0 голосов
/ 17 сентября 2018

try неопределенный

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

check-неопределенный
Поведение по умолчанию mat-checkbox.Всегда устанавливайте неопределенность в ложь, когда пользователь нажимает на флажок.Это соответствует поведению собственного "input type =" checkbox ""

https://material.angular.io/components/checkbox/overview#-code-check-code-

0 голосов
/ 17 сентября 2018

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

...