如何在 Angular 中为 Clarity 日期选取器设置定义值

Question

我目前有一个 Angular 7 项目，即 .Net core 2.0 和样式，如果项目我使用 Clarity 组件。

有谁知道如何为清晰度日期选择器设置默认值？

(我在 angular 中使用反应式表单，它也使用验证来检查字段是否不为空且不大于当前日期。

我的 HTML 是什么样子的：

<clr-date-container>
    <label>Service Date</label>
    <input type="date" clrDate formControlName="fromDateField" 
      [clrDate]="ValidateFromDateField()" />
    <clr-control-error>{{this.errorMsgFromdate}}</clr-control-error>
  </clr-date-container>

我的组件是什么样子的

 ValidateFromDateField() {
    if ((this.claimDetailService.DefaultDate === "") || (this.claimDetailService.DefaultDate === undefined)
      || (this.claimDetailService.DefaultDate === null)) {
     this.claimDetailService.DefaultDate = this.claimDetailform.get('fromDateField').value;
    } 
    console.log('Defualt date ', this.claimDetailService.DefaultDate);
    this.claimDetailService.currentClaimDetail.FROMDATE = new Date(this.claimDetailform.get('fromDateField').value).toDateString();
    this.claimDetailService.currentClaimDetail.TODATE = new Date(this.claimDetailform.get('fromDateField').value).toDateString();
    this.errorMsgFromdate = this.FieldValidation(this.claimDetailService.currentClaimDetail.FROMDATE, 'fromDateField');
    if (this.errorMsgFromdate === 'valid') {
      this.errorMsgFromdate = ' ';
      this.PopulateFromDateErr();
    }
    if (this.errorMsgFromdate !== '') {
      this.claimDetailform.get('fromDateField').setErrors(this.errorMsgFromdate);
    }
    this.claimDetailService.DefaultDate = this.claimDetailform.get('fromDateField').value;
  }

我确实尝试使用 setValue(( 方法，但它在控制台中给了我一个错误，说 setValue 不是 Clarity 日期选择器的有效属性。验证是在模糊上完成的，但模糊在日期选择器上不起作用，所以我使用 [clrDate] 来调用验证方法。

Answer 1

使用 [formControl] 并将其绑定到在 component.ts 中创建的 formControl

  <clr-date-container>
   <label>Service Date</label>
   <input type="date" clrDate 
      [formControl]="myDateField" 
      id="date" name="date"
      [(ngModel)]="date"
      [clrDate]="ValidateFromDateField()" />
   <clr-control-error>{{this.errorMsgFromdate}}</clr-control-error>
</clr-date-container> 

所以在你的 ts 组件中创建表单控件

myDateField = new FormControl('');

并使用以下方法修补该值：

  this.myDateField.patchValue('02/02/2019');

另请记住，如果日期错误，日期选择器将根据文档返回 null：

Date picker emits null when an invalid date is entered after a valid date was set.  

因此，请务必检查您使用的 3 种格式中的哪一种，因为即使日期正确，它也不会为您解析任何格式，角度的默认值为：

月/日/年

您可以在官方文档中阅读更多自述文件：https://clarity.design/documentation/datepicker#examples

Answer 2

在这里你需要将默认日期绑定到 ngModel，如下所示

 <form class="compact">
        <section class="form-block">
          <div class="form-group">
            <label for="date">Date:</label>
            <input type="date" id="date" [(ngModel)]="defaultDate" [ngModelOptions]="{standalone: true}" clrDate>
          </div>
        </section>
      </form>

并在 TS 文件中声明defaultDate

 defaultDate = '06/14/1989';

这是堆栈闪电战的解决方案

Answer 3

这是最简单的解决方案，愿这会对您有所帮助在此处找到堆栈链接

如果要使用相对形式，则必须在父模块中添加ReactiveFormsModule。

您还需要在 html templete 中声明一个 fromGroup，并最初为控件赋值，如上述解决方案所示。

Answer 4

您可以简单地执行以下操作：

 this.myForm = formBuildr.group({
  myDateControl: [new Date().toLocaleDateString()]});

或

myDateField = new FormControl(new Date().toLocaleDateString());