角度材质日期选择器允许字符串值

Question

我正在尝试保留"角度材料日期选择器"输入框，并键入DD/MMM/YYYY或MMM/YYYY或(任何字符串值(要求用户单击按钮am get(任意字符串值(并指定日期选择器输入框

Html

<a mat-flat-button (click)="Datepiker()">s</a>
</mat-icon>
<input matInput
placeholder="Course Completion" 
formControlName="Completion" maxlength="60"
#courseCompte
(click)="course.open()"
[matDatepicker]="course"
(keyup)="Compte.value =Compte.value.toUpperCase()"/>
<mat-datepicker #course></mat-datepicker> 

Ts

Datepiker() { 
this.mainForm.get(this.formgroupName).get('Completion').setValue("Provide");
}

Answer 1

我只有一种方法可以实现你想要的(我认为(，它如下：

您将组件的元素引用注入为：

constructor(private elemRef: ElementRef){}

并使用它来获得mat试图从你那里抽象的本地输入，一旦你有了这个元素，你就可以将它的输入设置为你想要的任何内容。

例如，您可以通过以下方式将其值设置为"已提供"：

let inputElement = this.elemRef.nativeElement.querySelector('.mat-input-element.mat-datepicker-input');
inputElement.value = 'is provided';

当然，上面的代码可以在onClick方法中使用，更改元素的值，如下所示：https://stackblitz.com/edit/angular-pfaxp1-fasyhy?file=src/app/datepicker-概述-示例.ts

话虽如此，我发现这个解决方案非常非常丑陋，而且是黑客攻击，除非我别无选择，否则我真的不想使用这样的东西。

另外请注意，如果在动画由焦点触发时直接在字段中注入值，则材质字段不会显示任何动画，因此除非您聚焦元素并等待动画完成，否则您将无法获得良好的动画，如您所见：https://stackblitz.com/edit/angular-pfaxp1-srcvv3?file=src/app/datepicker-概述-示例.ts

总而言之，这是一个很糟糕的解决方案，但我认为Material不允许你干净地做你想做的事。我建议你重新思考你的设计，尝试一种替代的、干净的解决方案，如果不可能的话，我希望我给了你一些关于如何前进的想法：(