带有ngx掩模MatDatepicker和反应形式的角输入

Question

我想在窗体上添加一个反应性表单控件，并触发一个错误：

多个自定义值访问器将窗体控件与未指定的name属性匹配。

一切都是分开工作的，反应式验证，掩码或matDatepicker，任何一对组合也能工作，但三者一起提示错误。

这是我的代码：

在component.ts中

formGroup = new FormGroup({
    date: new FormControl()
  });

在component.html中

    <mat-form-field>
      <input type="text" matInput [matDatepicker]="date_picker" mask="d0/M0/0000" formControlName="date">
      <mat-datepicker-toggle matSuffix [for]="date_picker"></mat-datepicker-toggle>
      <mat-datepicker #date_picker></mat-datepicker>
    </mat-form-field>

我在用：

"@angular/cli": "8.3.19"
"ngx-mask": "8.1.7"
"@angular/material": "8.2.3"

Answer 1

我正在为同样的问题而奋斗。根据这个线程，没有解决方案只有一个解决方案：错误:多个自定义值访问器将窗体控件与未指定的name属性匹配。

我使用了上面提到的解决方案，使用香草文本掩码作为临时解决方案(我希望)，但是上面的线程上没有活动，所以.下面是解决方案的链接：在一个输入字段中使用多个CustomValueAcessor

希望能帮上忙！

Answer 2

我的解决方案：

1-在日期输入下面创建一个辅助屏蔽输入，使用NgModel将其值绑定到日期输入。(不要对蒙面输入使用matInput指令！)

 <input #dateInput matInput formControlName="control"  [matDatepicker]="picker" etc.../>
 <input #maskedInput [(ngModel)]="dateInput.value" mask="00/00/0000" [dropSpecialCharacters]="false" etc.../>

2-使用css隐藏日期输入：

input:first-child {
  height: 0;
  width: 0;
  overflow: hidden;
}

3-将焦点事件从日期输入中继到蒙面输入。

<input #dateInput (focus)="maskedInput.focus()" etc...>
<input #maskedInput etc...>

4-从蒙面输入到日期输入的中继输入事件。

<input #dateInput etc.../>
<input #maskedInput (input)="dispatch(dateInput)" etc.../>

5-在组件ts中创建“分派”函数。

dispatch(input: HTMLInputElement){
    input.dispatchEvent(new Event('input'));
}

工作演示：https://stackblitz.com/edit/angular-ivy-gyy1i4?file=src%2Fapp%2Fapp.component.ts