必须为名称错误的表单控件提供值 - Angular7

Question

当我点击更新按钮时，我在 Angular 7 中有一个更新表单，它应该会打开一个带有更新表单的弹出窗口，但它给了我一个错误：

错误错误：必须为具有名称的表单控件提供值： '雇用日期'。

员工列表.component.html

    <div class="search-div">
  <button mat-raised-button (click)="onCreate()">
    <mat-icon>add</mat-icon>Create
  </button>
  <mat-form-field class="search-form-field" floatLabel="never">
    <input matInput [(ngModel)]="searchKey" placeholder="Search" autocomplete="off" (keyup)="applyFilter()">
    <button mat-button matSuffix mat-icon-button aria-label="Clear" *ngIf="searchKey" (click)="onSearchClear()">
      <mat-icon>close</mat-icon>
    </button>
  </mat-form-field>
</div>
<div class="mat-elevation-z8">
  <mat-table [dataSource]="listData" matSort>
    <ng-container matColumnDef="fullName">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Full Name</mat-header-cell>
      <mat-cell *matCellDef="let element">{{ element.fullName }}</mat-cell>  
    </ng-container>
    <ng-container matColumnDef="email">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Email</mat-header-cell>
      <mat-cell *matCellDef="let element">{{ element.email }}</mat-cell>  
    </ng-container>
    <ng-container matColumnDef="mobile">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Mobile</mat-header-cell>
      <mat-cell *matCellDef="let element">{{ element.mobile }}</mat-cell>  
    </ng-container>
    <ng-container matColumnDef="city">
      <mat-header-cell *matHeaderCellDef mat-sort-header>City</mat-header-cell>
      <mat-cell *matCellDef="let element">{{ element.city }}</mat-cell>  
    </ng-container>
    <ng-container matColumnDef="departmentName">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Department</mat-header-cell>
      <mat-cell *matCellDef="let element">{{ element.departmentName }}</mat-cell>  
    </ng-container>
    <ng-container matColumnDef="actions">
      <mat-header-cell *matHeaderCellDef></mat-header-cell>
      <mat-cell *matCellDef="let row">
        <button mat-icon-button (click)="onEdit(row)"><mat-icon>launch</mat-icon></button>
        <button mat-icon-button (click)="onDelete(row.$key)" color="warn"><mat-icon>delete_outline</mat-icon></button>
      </mat-cell>  
    </ng-container>
    <ng-container matColumnDef="loading">
      <mat-footer-cell *matFooterCellDef colspan="6">
        Loading data...
      </mat-footer-cell>
    </ng-container>
    <ng-container matColumnDef="noData">
      <mat-footer-cell *matFooterCellDef colspan="6">
        No data.
      </mat-footer-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    <mat-footer-row *matFooterRowDef="['loading']" [ngClass]="{'hide':listData!=null}"></mat-footer-row>
    <mat-footer-row *matFooterRowDef="['noData']" [ngClass]="{'hide':!(listData!=null && listData.data.length==0)}"></mat-footer-row>
  </mat-table>
  <mat-paginator [pageSizeOptions]="[5,10,25,100]" [pageSize]="5" showFirstLastButtons></mat-paginator>
</div>

employee.service.ts

export class EmployeeService {

  constructor(private firebase: AngularFireDatabase) { }

  employeeList: AngularFireList<any>;

  form: FormGroup = new FormGroup({
    $key: new FormControl(null),
    fullName: new FormControl('', Validators.required),
    email: new FormControl('', [Validators.email, Validators.required]),
    mobile: new FormControl('', [Validators.required, Validators.minLength(10)]),
    city: new FormControl(''),
    gender: new FormControl('1', Validators.required),
    department: new FormControl(0, Validators.required),
    hireDate: new FormControl(''),
    isPermanent: new FormControl(false, Validators.required),

  });

  initializedFormGroup(){
    this.form.setValue({
      $key: null,
      fullName: '',
      email: '',
      mobile: '',
      city:'',
      gender:'1',
      department:0, 
      hireDate:'',
      isPermanent:false,
    });
  }

  getEmployee(){
    this.employeeList = this.firebase.list('employees');
    return this.employeeList.snapshotChanges();
  }

  insertEmployee(employee){
    this.employeeList.push({
      fullName: employee.fullName,
      email: employee.email,
      mobile: employee.mobile,
      city: employee.city,
      gender: employee.gender,
      department: employee.department, 
      hireDate: employee.hireDate,
      isPermanent: employee.isPermanent,
    });
  }

  updateEmployee(employee){
    this.employeeList.update(employee.$key,{
      fullName: employee.fullName,
      email: employee.email,
      mobile: employee.mobile,
      city: employee.city,
      gender: employee.gender,
      department: employee.department, 
      hireDate: employee.hireDate,
      isPermanent: employee.isPermanent,
    });
  }

  deleteEmployee($key: string){
    this.employeeList.remove($key)
  }

  populateForm(employee){
    this.form.setValue(_.omit(employee, 'departmentName'));
  }
}

employee-list.component.ts

export class EmployeeListComponent implements OnInit {

  constructor(
    private service: EmployeeService,
    private departmentService: DepartmentService,
    private dialog: MatDialog
  ) { }

  listData: MatTableDataSource<any>;
  displayedColumns: string[] = ['fullName','email','mobile','city','departmentName','actions'];
  @ViewChild(MatSort) sort:MatSort;
  @ViewChild(MatPaginator) paginator:MatPaginator;
  searchKey: string;

  ngOnInit() {
    this.service.getEmployee().subscribe(list => {
      let array = list.map(item => {
        let departmentName = this.departmentService.getDepartmentName(item.payload.val()['department']);
        return {
          $key: item.key,
          departmentName,
          ...item.payload.val()
        };
      });
      this.listData = new MatTableDataSource(array);
      this.listData.sort = this.sort;
      this.listData.paginator = this.paginator;
      this.listData.filterPredicate = (data, filter) =>{
        return this.displayedColumns.some(ele =>{
          return ele != 'actions' && data[ele].toLowerCase().indexOf(filter) != -1;
        });
      };
    });
  }

  onSearchClear(){
    this.searchKey = "";
    this.applyFilter();
  }

  applyFilter(){
    this.listData.filter = this.searchKey.trim().toLowerCase();
  }

  onCreate(){
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.width = "60%";
    this.dialog.open(EmployeeComponent,dialogConfig);
  }

  onEdit(row){
    this.service.populateForm(row);
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.width = "60%";
    this.dialog.open(EmployeeComponent,dialogConfig);
  }

}

我对 Angular 很陌生，请帮忙？

Answer 1

请尝试在 populateForm(employee) 函数中使用 patchValue(employee)，而不是在您的 employee.service.ts 中使用 setValue(employee) 参考这个链接 type script given error must supply value for formcontrol name id

Answer 2

使用

hireDate: employee.hireDate == "" ? "" : this.datePipe.transform(employee.hireDate, 'yyyy-MM-dd')

而不是hireDate。

还有

import DatePipe from @angular/common