0

我目前在这里玩stackblitz：https ://stackblitz.com/edit/angular-ivy-qr7yav?file=src%2Fapp%2Fanother.component.html

在这里找到了 ng-neat 的输入掩码https://github.com/ngneat/input-mask和 ngx-mask，我发现如果我尝试在两个潜在掩码之间动态绑定传入的掩码值，它不起作用。关于事后像这样绑定的能力，我有什么遗漏吗？

我在此链接上找到了一个响应，其中包含 ngx-mask 的解决方法，但我真的不明白为什么。

所以我决定在用户​​输入一些值之后动态添加掩码。— — Damian Kociszewski 20 年 9 月 16 日在 10:15 @DamianKociszewski 你是如何解决这个问题的？– Patrick Freitas 3 月 23 日 18:00 好吧，我并不为我的解决方案感到自豪，但我已将我的掩码声明为初始值为 null 的 BehaviorSubject。我正在等待输入初始化，并根据初始输入值将下一个值（掩码）传递给掩码 BehaviorSubject。如果我使用异步管道订阅掩码值，我可以动态更改它的掩码。所以基本上我没有在init上提供掩码是一种作弊。– 达米安 Kociszewski 3 月 26 日 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>
4

0 回答 0