angular 2 - 6 日期表单域防止清除

Question

我有一个预填日期输入：

它是预先填充的，在所有潜在的用例中都有原因需要更改，但永远不会清空。

我想防止它被清空

这是我的 html 代码：

<form class="details" [formGroup]="forcastForm" [style.fontSize.px]="13">
  <div class="row no-gutters">
    <div class=".col-lg-8 .col-xl-12">
      <mat-form-field class="my-date-input">
        <mat-label i18n="confirmed date">Date</mat-label>
        <input matInput type="date" formControlName="dateFC">
      </mat-form-field>
    </div>
  </div>
</form>

和我的打字稿：

forcastForm: FormGroup;

constructor(
  private fb: FormBuilder,
  private datePipe: DatePipe)
  {
    const j = new Date;
    let month = (j.getUTCMonth() + 1).toString();
    if(month.length < 2) month = '0' + month;
    const dateCode = j.getUTCFullYear().toString() + month + j.getUTCDate().toString();
    const dt = this.datePipe.transform(j, 'yyyy-MM-dd');

    this.forcastForm = fb.group({
      savedId: new FormControl({value: dateCode, disabled: false}, Validators.required),
      dateFC: new FormControl({value: dt, disabled: false}, Validators.required),
      comentary: new FormControl({value: '', disabled: false}, Validators.required),
    });

  }

我可以通过 /deep/ css 隐藏 x 图标，但是没有真正的方法可以看到 x 代码检查器中的代码。

Answer 1

将 required 属性添加到输入元素：

<input matInput type="date" required formControlName="dateFC">

angular 2 - 6 日期表单域防止清除

angular 2 - 6 date form field prevent clear

forms

angular-material

angular-material2

angular