Блог

Я новичок в angular. Проблема на самом деле в EmployeeComponent.ts, если я вызываю this.resetForm(); , ngOnInit() то элементы управления диалогового окна отображаются во время загрузки страницы … но во время редактирования, когда оно поступает из employeelist service.formData , все время возвращается к нулю, я не хочу, чтобы это происходило. Я хочу, чтобы обе функции выполнялись.

Это ошибка ниже, если я remove this.resetForm(); ngOnInit() в. (но редактирование работает нормально) Примечание: service.formData содержит поля id, description и active

Ошибка журнала консоли: EmployeeComponent_Host.ngfactory.js ? [sm]: 1 ОШИБКА TypeError: не удается прочитать свойство ‘id’ undefined в EmployeeComponent.push.

EmployeeComponent.ts

 ngOnInit() {
  this.resetForm();
}


resetForm(form ? : NgForm) {

  if (form != null)
    form.resetForm();

  this.service.formData = {
    id: null,
    description: '',
    active: true,
  }
  console.log(this.service.formData.id);
}  
  

EmployeeListComponent.ts

 onEdit(emp: Employee) {
  this.service.formData = Object.assign({}, emp);
  const dialogConfig = new MatDialogConfig();
  dialogConfig.disableClose = true;
  dialogConfig.autoFocus = true;
  dialogConfig.width = "50%";
  this.dialog.open(EmployeeComponent, dialogConfig);
}
  

Employee.component.html

 <form #form="ngForm" autocomplete="off" >
  <mat-grid-list cols="2">
          <input type="hidden" name="id" #id="ngModel" [(ngModel)]="service.formData.id">       
        <mat-form-field>   
          <input name="description" matInput #description="ngModel" [(ngModel)]="service.formData.description" placeholder="Employee" required>  
   </mat-form-field>
 <mat-checkbox  matInput #active="ngModel" [(ngModel)]="service.formData.active" name="active">Active</mat-checkbox>         
  </mat-grid-list>
      <button mat-raised-button color="primary" type="submit" [disabled]="form.invalid" (click)="onSubmit(form)">Submit</button>
      <button mat-raised-button color="warn" style="margin-left: 6px;" (click)="onClear(form)">Clear</button>

</form>
  

Здесь EmployeeComponent — это ваш компонент диалогового окна mat для открытия, поэтому вам необходимо предоставить данные в диалоговое окно, используя приведенное ниже в вашем конструкторе EmployeeComponent

  constructor(
@Inject(MAT_DIALOG_DATA) data)){}
  

и когда вы открываете диалоговое окно для редактирования, вам необходимо установить данные

   onEdit(emp: Employee) {
      dialogConfig = new MatDialogConfig();
      dialogConfig.disableClose = true;
      dialogConfig.autoFocus = true;
      dialogConfig.width = "50%";
      // Provide your data here      
      dialogConfig.data = emp;

      this.dialog.open(EmployeeComponent, dialogConfig);
    }
  

Теперь вы можете использовать эти данные в EmployeeComponent по имени свойства «data»

и используйте только форму сброса в ngOnInit

 ngOnInit() {
if (form != null)
    form.resetForm();
}
  

Другие вещи, которые вам нужно обработать, например, очистить эти данные, когда вы закончите с сохранением