angular - mat-datePicker 角度 11

Question

当我添加 mat-datepicker 时为工作订单创建编辑页面页面变为空:(

这是我的 ts 代码：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { WorkorderFullDetailsDto, WorkorderService } from '@proxy/workorders';
import {FormBuilder, FormGroup, FormsModule, Validators} from '@angular/forms';

@Component({
  selector: 'app-edit-workorder',
  templateUrl: './edit-workorder.component.html',
  styleUrls: ['./edit-workorder.component.scss']
})

export class EditWorkorderComponent implements OnInit {

form:FormGroup;
  id:string; 
workorder : WorkorderFullDetailsDto |undefined;
constructor(private route: ActivatedRoute ,private workorderServices :WorkorderService,private fb: FormBuilder ) { 


  this.route.params.subscribe((param)=>{console.log(param['id']);
    this.id=param['id'];
    console.log(this.id);});  



}

  ngOnInit():void{
    this.workorderServices.getFullWorkorderDetailsByWorkorderid(this.id).subscribe((work) => {
      this.workorder = work;
      console.log(this.workorder.complaint);
    
      
    });
    this.buildForm();
    
}


buildForm() {
  this.form = this.fb.group({
    complaint: [this.workorder?.complaint, Validators.required],
    workorderType: [this.workorder?.workorderType, Validators.required],
     customerId: [this.workorder?.customerId ,Validators.required],    
      deadLine: [null ,Validators.required],
     employeesId:[null,Validators.required],
      responsibleEmployeeId:[this.workorder.responsibleEmployeeName,Validators.required]

  });
}

}

这是HTML：

<form [formGroup]="form" class="form-container">
    <form [formGroup]="form" class="form-container">
        <mat-form-field class="w-100">
          <mat-label>{{'::Complaint' | abpLocalization}} <span> * </span></mat-label>
          <input type="text" id="workorder-complaint" matInput formControlName="complaint" [(ngModel)]="workorder.complaint" />
        </mat-form-field>
        <mat-form-field class="w-100">
    
          <mat-label    >{{'::DeadLine' | abpLocalization}} <span> * </span></mat-label
          >
          <input matInput [matDatepicker]="picker"  formControlName="deadLine" />
          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>
  
    </form>
  

这就是结果：[！[在此处输入图像描述][1]][1] [1]：https://i.stack.imgur.com/DksVy.png

当我删除日期选择器表单字段时，其他字段正常工作