MatCheckbox preventDefault () и значение event.checked
Как я могу установить флажок Материал, чтобы он не отмечался / не снимался по умолчанию (например, при вызове 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.info('onClick event.checked ' + event.checked);
console.info('onClick event.target.checked '+event.target.checked);
}
onChange(event) {
// can't event.preventDefault();
console.info('onChange event.checked '+event.checked);
}
}
Событие (click) печатает значения undefined, но успешно предотвращает распространение события, событие (change) печатает значение, но распространяет событие.
Связанные проблемы:
@Chellappan Нет, я хочу вручную изменить значение флажка (установлен или не установлен).
Ответы 5
Мы не можем контролировать поведение флажка и свойств события по умолчанию. Вы можете создать 2 значка изображения с отмеченным и непроверенным состоянием, переключать его в зависимости от значения.
Если вы хотите установить флажок вручную, @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
попробовать неопределенный
проверить
Переключить установленное значение флажка, игнорировать неопределенное значение. Если флажок находится в неопределенном состоянии, флажок будет отображаться как неопределенный флажок независимо от установленного значения.
чек-неопределенный
Поведение mat-checkbox по умолчанию. Всегда устанавливайте для неопределенного значения false, когда пользователь нажимает на поле mat-checkbox. Это соответствует поведению собственного "input type =" checkbox ""
https://material.angular.io/components/checkbox/overview#-code-check-code-
В моем личном случае мне нужно кодировать для мыши, а также для событий клавиатуры, если вам небезразлична доступность, о которой вы знаете :)
если вы нажмете «Пробел» с флажком «Все еще», поэтому (щелчка) недостаточно, вам также необходимо включить (нажатие клавиши). Не только это, но после того, как я исправил проблему с пробелом, я заметил, что он также блокирует вкладку, которая мне нужна для навигации с помощью клавиатуры, поэтому мне просто пришлось добавить небольшой код для этого
<mat-checkbox [checked] = "descendantsAllSelected(node)"
[indeterminate] = "descendantsPartiallySelected(node)"
(click) = "toggleDescendants(node,$event)"
(keydown) = "toggleDescendants(node,$event)"
>
{{node.name}}
</mat-checkbox>
В коде
toggleDescendants(node, $event) {
this._logger.debug('toggleDescendants()');
this.treeControl.toggleDescendants(node);
if ($event.code !== 'Tab') {
$event.preventDefault();
}
}
Вы можете предотвратить действие по умолчанию при «изменении» с помощью поставщика в компоненте:
providers: [{
provide: MAT_CHECKBOX_DEFAULT_OPTIONS,
useValue: { clickAction: 'noop' } as MatCheckboxDefaultOptions
}]
(источник: https://material.angular.io/components/checkbox/overview#noop)
и вы можете привязать проверенный к локальной переменной (или функции получения)
<mat-checkbox
(click) = "changeValue()"
[checked] = "theValue"
>
Whatever
</mat-checkbox>
Итак, в коде, например, вы используете значение в качестве значения и устанавливаете это значение программно. Таким образом, вам не нужно получать состояние флажка в качестве параметра метода щелчка, вы можете получить к нему доступ из значения.
theValue: boolean = false;
changeValue(): void {
this.theValue = !this.theValue
}
вы хотите отключить чекбокс?