I'm currently playing around with a stackblitz here: https://stackblitz.com/edit/angular-ivy-qr7yav?file=src%2Fapp%2Fanother.component.html
With both ng-neat's input-mask found here https://github.com/ngneat/input-mask as well as ngx-mask, I've found that if I try to dynamically bind the passed in masking value between two potential masks, it doesn't work. Is there something I'm missing in regards to the ability to bind like this after the fact?
I found a response at this link that has a workaround for ngx-mask, but I don't understand the why really.
So I've decided to add the mask dynamically, right after the user inputs some value. – Damian Kociszewski Sep 16 '20 at 10:15 @DamianKociszewski how do you solved that? – Patrick Freitas Mar 23 at 18:00 Well, I am NOT proud of my solution, but I've declared my mask as a BehaviorSubject with an initial value of null. I am waiting for the input to get initialized and depending on the initial input value I am passing the next value (mask) to the mask BehaviorSubject. If I subscribe to the mask value with the async pipe, I can dynamically change its mask. So basically I am kind of cheating by not providing the mask on init. – Damian Kociszewski Mar 26 at 10:41
> //another.component.html <div>
> <input
> [formControl]="ipAddress"
> [inputMask]="mask ? ipAddressMask : numberMask"
> placeholder="IP Address"
> /> </div>
__
// another.component.ts
import {
Component,
Input,
SimpleChanges,
VERSION,
} from '@angular/core';
import { FormControl } from '@angular/forms';
import { createMask } from '@ngneat/input-mask';
@Component({
selector: 'another',
templateUrl: 'another.component.html',
})
export class AnotherComponent {
@Input() mask: boolean;
constructor() {}
ngOnChanges(simple: SimpleChanges) {
if (simple?.mask) {
console.log(simple);
}
}
name = 'Angular ' + VERSION.major;
thing = true;
ipAddressMask = createMask({
mask: `\\*\\*\\*-\\*\\*\\*\\*`,
placeholder: '*',
clearMaskOnLostFocus: false,
});
numberMask = createMask({
mask: '9{*}',
placeholder: '*',
// clearMaskOnLostFocus: true,
});
ipAddress = new FormControl('');
}
_
// app.component.ts
import { Component } from '@angular/core';
>
> @Component({
> selector: 'my-app',
> templateUrl: './app.component.html',
> styleUrls: ['./app.component.css'],
> })
> export class AppComponent {
> public mask: boolean = false;
> constructor() {}
>
> switchMask = () => {
> this.mask = !this.mask;
> console.log(this.mask);
> };
> }
// app.component.html
<another [mask]="mask"></another>
<button (click)="switchMask()">reset</button>
