Angular

Question

我想在表单上添加一个反应式表单控件，但触发了一个错误：

More than one custom value accessor matches form control with unspecified name attribute

一切都单独工作，反应式表单验证，掩码或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 作为临时（我希望）解决方案，但是上面的线程没有 activity 所以... 这是解决方法 link： 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' 函数

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

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

Angular - 使用 ngx-mask MatDatepicker 和反应形式输入

Angular - Input with ngx-mask MatDatepicker and reactive form

angular-material

angular-reactive-forms

mat-datepicker

ngx-mask