Блог

создание страницы редактирования для рабочего заказа когда я добавляю мат-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

когда я удаляю поле формы выбора даты, другое поле работает правильно