Angular 日期选择器始终无效

Question

我有一个 angular 日期选择器，它位于一个带有所需验证器的反应式表单中。问题是它总是无效的，即使选择了日期。奇怪的是控件无效时不显示红色。我需要为此做一些手动 css 规则吗？ HTML 和下面的打字稿。这个问题的 stackblitz 在这里 https://stackblitz.com/edit/angular-ewa1kj-vv5baj?file=app/input-error-state-matcher-example.ts

我试过在日期选择器上使用没有 errorStateMatcher 的 -- 结果相同

谢谢

皮特

HTML:

    <form [formGroup]="ticketForm" class="example-form" (ngSubmit)="submitForm()">
  <div formGroupName="systemForm">
    <div fxLayout="column" fxLayoutAlign="left center" fxLayoutGap="15px">
      <mat-label>Lateral: *</mat-label>
      <mat-radio-group name="lateral" required formControlName="lateral">
        <mat-radio-button value=1>Yes</mat-radio-button>
        <mat-radio-button value=2>No</mat-radio-button>
      </mat-radio-group>
      <mat-form-field appearance="outline">
        <mat-label>Mark Date</mat-label>
        <input matInput [matDatepicker]="pickerMarkDate" required [errorStateMatcher] = matcher>
        <mat-datepicker-toggle matSuffix [for]="pickerMarkDate"></mat-datepicker-toggle>
        <mat-datepicker #pickerMarkDate></mat-datepicker>
      </mat-form-field>
    </div>
  </div>
/*same result with and without the errorStateMatcher*/
      <button type="submit" mat-stroked-button>Submit</button>
    </form>

打字稿：

export class InputErrorStateMatcherExample {
  @Input() markDateValid: string;
  @Input() lateralValid: string;
  ticketForm = new FormGroup({
    systemForm: new FormGroup({
      lateral: new FormControl('', [Validators.required]),
      pickerMarkDate: new FormControl('', [Validators.required])
    })
  });

  matcher = new MyErrorStateMatcher();
  submitForm() {
    this.markDateValid = this.ticketForm.get('systemForm').get('pickerMarkDate').valid.toString();//always false
    console.log(this.ticketForm.get('systemForm').get('pickerMarkDate').errors);
    this.lateralValid = this.ticketForm.get('systemForm').get('lateral').valid.toString();
    console.log(this.ticketForm.get('systemForm').get('lateral').errors);
  }
}

Answer 1

您必须将 formControlName 指令添加到 link 到您的 formGroup:

<input formControlName="pickerMarkDate" matInput [matDatepicker]="pickerMarkDate">

Angular 日期选择器始终无效

Angular Date Picker is always invalid

javascript

angular

angular-forms