角度日期选取器始终无效

Question

我在一个带有所需验证器的反应表单中有一个角度日期选择器。问题是，即使选择了日期，它也总是无效的。奇怪的是，控件无效时不会显示红色。我需要为此做一些手动css规则吗？HTML和下面的Typescript。这里有一大堆问题https://stackblitz.com/edit/angular-ewa1kj-vv5baj?file=app/input-错误-状态匹配-样本.ts

我在日期选择器上尝试了一个没有错误的StateMatcher——相同的结果

感谢

Pete

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>

TypeScript：

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指令才能链接到formGroup:

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