Question

我想在表单上添加反应式表单控件，并触发错误：

多个自定义值访问器将表单控件与未指定名称属性匹配

一切都可以分开工作，反应式表单验证，mask或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

我正在努力解决同一问题。根据此线程，没有解决方案，只有一种解决方法： Error: More than one custom value accessor matches form control with unspecified name attribute

我使用了提到的解决方法，将vanilla-text-mask作为临时（我希望）解决方案，但是上述线程没有任何活动，因此... 这是解决方法的链接： Use more than one CustomValueAcessor in one Input field

希望有帮助！

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

角度-使用ngx-mask MatDatepicker和反应形式的输入

2 个答案: