formGroup需要一个FormGroup实例。角度7

Question

从网格中选择行时，我需要加载表单值。

HTML文件：

<form [formGroup]="SupplierModel.formSupplierGroup">
  <br>
  <p-card header="Simple Card" [style]="{width: '560px'}">
      <p-header>
          Add new Supplier
      </p-header>
      <br>
        <div class="p-grid">
          <div class="p-col-4">
            <span class="ui-float-label">
              <input id="txtFirstName" type="text" formControlName="vFirstName" pInputText [(ngModel)]="SupplierModel.FirstName"/>
              <label for="txtFirstName">First Name</label>
            </span>
            <div *ngIf="SupplierModel.formSupplierGroup.dirty" [hidden]="hasError('required', 'vFirstName')" >First Name is required.</div>
          </div>
          <br>
          <div class="p-col-4">
            <span class="ui-float-label">
              <input id="txtLastName" type="text" formControlName="vLastName" pInputText [(ngModel)]="SupplierModel.LastName" />
              <label for="txtLastName">Last Name</label>
            </span>
            <div *ngIf="SupplierModel.formSupplierGroup.dirty" [hidden]="hasError('required', 'vLastName')">Last Name is required.</div>
            <div *ngIf="SupplierModel.formSupplierGroup.dirty" [hidden]="hasError('pattern', 'vLastName')">Value must have minimum 3 characters with only Alphabets.</div>
          </div>
          <br>
          <div class="p-col-4">
            <span class="ui-float-label">
              <input id="txtSupplierPhone" type="text" formControlName="vPhone" pInputText  [(ngModel)]="SupplierModel.Phone"/>
              <label for="txtSupplierPhone">Phone</label>
            </span>
            <div *ngIf="SupplierModel.formSupplierGroup.dirty" [hidden]="hasError('required', 'vPhone')">Phone number is required.</div>
            <div *ngIf="SupplierModel.formSupplierGroup.dirty" [hidden]="hasError('pattern', 'vPhone')">Value must be 10 digit numeric.</div>
          </div>
          <br>
          <div class="p-col-4">
            <span class="ui-float-label">
              <input id="txtSupplierEmail" type="text" formControlName="vEmail" placeholder="          somename@abc.com" pInputText [(ngModel)]="SupplierModel.Email" />
              <label for="txtSupplierEmail">Email</label>
            </span>
            <div *ngIf="SupplierModel.formSupplierGroup.dirty" [hidden]="hasError('required', 'vEmail')">Email is required.</div>
            <div *ngIf="SupplierModel.formSupplierGroup.dirty" [hidden]="hasError('pattern', 'vEmail')">Email format is not valid.</div>
          </div>
          <br>
          <div class="p-col-4">
              <label>Date of Birth</label><br>
              <p-inputMask mask="99/99/9999" id="txtDOB" placeholder="99/99/9999" slotChar="mm/dd/yyyy" [(ngModel)]="SupplierModel.DOB" [ngModelOptions]="{standalone: true}" ></p-inputMask>
          </div>
          <br>
          <div class="p-col-12">
              <button type="button" pButton id="btnSupplierAdd" (click)="PostSupplier()" label="Add Supplier" [disabled]="!(SupplierModel.formSupplierGroup.valid)"></button>&nbsp;
              <button [disabled]="DisablePostBtn" type="button" pButton id="btnSupplierClear" (click)="Clear()" label="Clear" ></button>
          </div>
        </div>
  </p-card>
</form>
<datagrid-ui [grid-columns]="[{'colName':'FirstName'},{'colName':'LastName'},{'colName':'Email'}]"
 [grid-data]="SupplierModels" (grid-selected)="SelectSupplier($event)">
</datagrid-ui>

这是组件文件：

import { Component, Injector } from '@angular/core';
import { Supplier, SupplierDTO } from './Supplier.Model';
import { BaseLogger } from '../Utility/Logger';
import { Http } from '@angular/http';
import { HttpClient } from '@angular/common/http';

@Component({
  templateUrl: '../Supplier/Supplier.View.html'
})
export class SupplierComponent {
  title = 'Suppliers - DirestShop';
  SupplierModel : Supplier = new Supplier();
  SupplierModels : Array<Supplier>=new Array<Supplier>();
  SupplierDTOModel: SupplierDTO = new SupplierDTO();
  DisablePostBtn : Boolean = false;
  objLog: BaseLogger = null;
  constructor(_injector:Injector, public http: Http, public httpc: HttpClient){
    this.objLog = _injector.get("1");
    this.objLog.Log();
    this.GetSupplier();
  }
  Clear(){
    this.SupplierModel=new Supplier();
  }
  GetSupplier(){
    this.httpc.get("http://localhost:3000/Suppliers").subscribe(res => this.SuccessGet(res), res => this.Error(res));
  }
  PostSupplier(){
    this.SupplierDTOModel.FirstName = this.SupplierModel.FirstName;
    this.SupplierDTOModel.LastName = this.SupplierModel.LastName;
    this.SupplierDTOModel.Email = this.SupplierModel.Email;
    this.SupplierDTOModel.Phone = this.SupplierModel.Phone;
    this.SupplierDTOModel.DOB = this.SupplierModel.DOB;
    this.httpc.post("http://localhost:3000/Suppliers", this.SupplierDTOModel).subscribe(res => this.Success(res), res => this.Error(res));
    this.DisablePostBtn = true;
  }
  Success(res){
    this.GetSupplier();
  }
  SuccessGet(res){
    this.SupplierModels = res;
    this.DisablePostBtn = false;
    this.SupplierModel = new Supplier();
  }
  Error(res){
    console.log(res);
  }
  SelectSupplier(_selected:Supplier){
    this.SupplierModel = _selected;
  }
  hasError(validatorType:string, control:string): boolean{
    return !this.SupplierModel.formSupplierGroup.controls[control].hasError(validatorType);
  }
}

这是Grid.html文件：

<table>   
    <tr>
           <td *ngFor="let col of gridColumns">
               {{col.colName}}
           </td>
    </tr>
    <tr *ngFor="let colObj of gridRows">
        <td *ngFor="let col of gridColumns">
            {{colObj[col.colName]}}
        </td>
        <td>
            <a (click)="SelectGrid(colObj)" [routerLink]="['/Supplier/Add']">select</a>
        </td>
    </tr>
</table>

这是网格组件文件：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
    selector: "datagrid-ui",
    templateUrl: "./Grid.html"
})

export class GridComponent{
    gridColumns: Array<Object> = new Array<Object>();
    gridRows: Array<Object> = new Array<Object>();

    @Input("grid-columns")
    set setGridCols(_gridCols: Array<Object>){
        this.gridColumns = _gridCols;
    }
    @Input("grid-data")
    set setGridRows(_gridRows: Array<Object>){
        this.gridRows = _gridRows;
    }

    @Output("grid-selected")
    eventEmitter: EventEmitter<Object> = new EventEmitter<Object>();

    SelectGrid(_selected: Object){
        this.eventEmitter.emit(_selected);
    }
}

我正在尝试将选定的行值加载到表单中。 “选择”按钮事件成功触发，但出现以下错误： “错误错误：formGroup需要一个FormGroup实例。请传入一个。”

该如何解决？