错误类型错误：无法读取表单控件名称中未定义错误的属性“获取”

Question

我正在尝试使表单正确知道，但我总是收到错误

'ERROR TypeError: Cannot read property 'get' of undefined'

尽管我尝试了一些方法，例如在 [] 中编写 formControlName 或尝试获取 form.controls 的值或这些都不起作用，但有人可以帮我解决这个问题吗？我的输入字段出现错误。

TS 文件：

@Component({
  selector: 'chronos-employee-insurrance',
  templateUrl: './employee-insurrance.component.html',
  styleUrls: ['./employee-insurrance.component.css']
})
export class EmployeeInsurranceComponent implements OnInit {
  @Input()
  public employeeId: number;
  @Input()
  public modalRef: BsModalRef;

  isSaving = false;
  private eventManager: JhiEventManager;




  @Input()
  employeeInsurranceForm: FormGroup;

  constructor(
    private fb: FormBuilder,
    private employeeInsuranceService: EmployeeInsurranceService

  ) {

  }

  ngOnInit() {
    this.employeeInsuranceService.findByEmployeeId(this.employeeId).subscribe(res => {

      this.initializeForm(res.body.body);

    });
  }




  initializeForm(insurance: IEmployeeInsurrance) {
    this.employeeInsurranceForm = this.fb.group({
      AFM :       new FormControl(''),
      IKA:       new FormControl(''),
      AMKA:       new FormControl(''),
      SteuerId:   new FormControl(''),
      employeeId: new FormControl(this.employeeId)
    });
    if (insurance) {
      this.employeeInsurranceForm.patchValue(<{ [key: string]: any }>insurance);
    }
  }


  save() {
    this.isSaving = true;
    this.employeeInsuranceService
      .update(this.employeeInsurranceForm.value)
      .subscribe(
        (res: HttpResponse<IEmployeeInsurrance>) => this.onEmployeeInsuranceSaveSuccess(res.body),
      );
  }

  private onEmployeeInsuranceSaveSuccess(result: IEmployeeInsurrance) {
    this.eventManager.broadcast({ name: 'employee-insurance-changed', result });
    this.isSaving = false;
    this.closeModal();
  }

  closeModal() {
    this.modalRef.hide();
  }

HTML 文件：

<div class="modal-box">
  <div class="modal-header">
    <button
      aria-label="Close"
      class="close"
      type="button"
      (click)="closeModal()"
    >
      <span aria-hidden="true">×</span>
    </button>
    <h4 class="modal-title">{{ 'Insurrance information' | translate }}</h4>
  </div>

  <form
    >
    <div class="modal-body">
      <div class="master">
          <div class="smart-form" [formGroup]="employeeInsurranceForm" (submit)="save()">
            <fieldset>
                  <section class="col col-6">
                    <label class="input">
                      <i class="icon-prepend fa fa-user fa-fw"></i>
                      <input
                        class="form-control"
                        name="IKA"
                        formControlName="IKA"
                        placeholder="IKA"
                      />

                    </label>
                  </section>

                  <section class="col col-6">
                    <label class="input">
                      <i class="icon-prepend fa fa-user fa-fw"></i>
                      <input
                        type="text"
                        class="form-control"
                        name="AMKA"
                        formControlName="AMKA"
                        placeholder="AMKA"
                      />

                    </label>
                  </section>

                  <section class="col col-6">
                    <label class="input">
                      <i class="icon-prepend fa fa-user fa-fw"></i>
                      <input
                        type="text"
                        name="AFM"
                        class="form-control"
                        formControlName="AFM"
                        placeholder="AFM"
                      />

                    </label>
                  </section>

                  <section class="col col-6">
                    <label class="input">
                      <i class="icon-prepend fa fa-user fa-fw"></i>
                      <input
                        type="text"
                        name="SteuerID"
                        class="form-control"
                        formControlName="SteuerID"
                        placeholder="Steuer ID"
                      />

                    </label>
                  </section>
            </fieldset>
              </div>
          </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" (click)="closeModal()">
        {{ 'Cancel' | translate }}
      </button>
      <button
        type="button"
        class="btn btn-primary"
        (click)="save()"
      >
        <div [ngClass]="{'editableform-loading' : isSaving }"></div>
        {{ 'Save' | translate }}
      </button>
    </div>
  </form>
</div>

Answer 1

由于您的表单依赖于异步 HTTP 调用，因此只需保护它免受错误：

<div *ngIf="employeeInsurranceForm" 
  class="smart-form" 
  [formGroup]="employeeInsurranceForm" 
  (submit)="save()">

并且，正如我的评论中所述，不要将表单作为输入传递给您的控件，因为您根本不使用它并在组件初始化时分配它。

Answer 2

您可以尝试在构造函数中使用 FormBuilder 构建表单，然后仅在 ngOnInit() 中初始化数据。