Angular ternary condition with keydown.space and keydown.tab
Multi tool use
Clash Royale CLAN TAG#URR8PPPAngular ternary condition with keydown.space and keydown.tab
What I want is to check if a input type is of a particular type only then apply the check of keydown.space and keydown.tab
keydown.space
keydown.tab
What I tried:
<input (keydown.space)="locationUi.location_type=='video' ? $event.preventDefault() : false" (keydown.tab)="locationUi.location_type=='video' ? $event.preventDefault(): false" id="masked-input" [ngClass]="locationUi.location_type=='video' ? 'width-40':''" (input)="textInput()" type="{{locationUi.extra.field.type}}" name="inputOtherAdress" class="form-control" placeholder="{{locationUi.extra.field.placeholder}}"
[required]="locationUi.enabled" [value]="locationUi.data" (input)="locationUi.data = $event.target.value">
Results:
this disables the spaces and tabs on all the input fields.
3 Answers
3
Without checking it, it probably works if you used true instead of false in the ternary.
true
false
However, this should be better handled in the controller anyway. It's quite a bit of logic for the template already and makes the entire thing really hard to read.
public onSpace(event: Event) {
if (this.locationUi.location_type === "video") {
event.preventDefault();
}
}
and
<input (keydown.space)="onSpace($event)" … />
You're using 'false' instead try it with 'null' and it should work fine.
Furthermore, a better solution would be to use it through controller.
You can Do Like this
<input
(keydown.space)="locationUi.location_type=='video' ? keyDown($event) : false"
(keydown.tab)="locationUi.location_type=='video' ? keyDownTab($event): false" id="masked-input"(input)="locationUi.data = $event.target.value">
Example: https://stackblitz.com/edit/angular-w2asws
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
