无法读取属性获取未定义的

Question

我在我的应用程序的每个编辑表单中都遇到了这个错误，我也遇到了错误 "formGroup expects a FormGroup instance. Please pass one in." 但我认为我已经正确地完成了所有事情。请查看...

编辑-account.component.ts :-

 ngOnInit() {
    this.GetAccountByID(this.ID);
    this.getAllAccounts();
    this.getAllCountries();
  }
  getAllAccounts() {
    this._masterservice.getAllAccounts<Account[]>().subscribe(data => {
      this.accounts = data;
    });
  }

  GetAccountByID(id: string) {
    let svc = this;
    this._masterservice.getAccountByID<Account>(id).subscribe((data: Account) => {
      if (data !== null) {
        // svc.CurrentData=data;
        svc.bindData(data);

      } else {
        console.warn('No data fround for ID-' + id);
      }
    });
  }
  bindData(tempData: Account) {
    let _startDate: Date = new Date(tempData.startdate);
    let _endDate: Date = new Date(tempData.duedate);
    this.editForm = this.formBuilder.group({
      id: [tempData.id],
      name: [tempData.name, [Validators.required]],
      country: [tempData.country],
      currency: [tempData.currency],
      duedate: [tempData.duedate ? _endDate : '', [Validators.required]],
      startdate: [tempData.startdate ? _startDate : '', [Validators.required]],
      contactperson: [tempData.contactperson],
      contactno: [tempData.contactno, [Validators.required, Validators.pattern('^[0-9][0-9]{9}')]],
      contactemail: [tempData.contactemail, [Validators.required, Validators.email]],
      source: [tempData.source]

    });

  }

编辑-account.component.html :-

<form [formGroup]="editForm">
                <div class="form-group row">
                    <div class="col-md-6" style="display: none">
                        <div class="md-input-wrapper">
                            <label class="required">Name:</label>
                            <input type="text" class="md-form-control md-valid" formControlName="name" name="name"
                                id="name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }" />
                            <span class="md-line"></span>
                            <div *ngIf="submitted && f.name.errors" class="invalid-feedback error">
                                <div *ngIf="f.name.errors.required">Name required</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6" style="display: none">
                        <div class="md-input-wrapper">
                            <label>Contact person:</label>
                            <input type="text" class="md-form-control md-valid" formControlName="contactperson"
                                name="contactperson" id="contactperson">
                            <span class="md-line"></span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="md-input-wrapper">
                            <label class="required">Name:</label>
                            <input type="text" class="md-form-control md-valid" formControlName="name" name="name"
                                id="name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }" />
                            <span class="md-line"></span>
                            <div *ngIf="submitted && f.name.errors" class="invalid-feedback error">
                                <div *ngIf="f.name.errors.required">Name required</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="md-input-wrapper">
                            <label>Contact person:</label>
                            <input type="text" class="md-form-control md-valid" formControlName="contactperson"
                                name="contactperson" id="contactperson">
                            <span class="md-line"></span>
                        </div>
                    </div>


                </div>

                <div class="form-group row">
                    <div class="col-md-6">
                        <div class="md-input-wrapper">
                            <label class="required">Contact no:</label>
                            <input type="text" class="md-form-control md-valid " formControlName="contactno"
                                name="contactno" id="contactno"
                                [ngClass]="{ 'is-invalid': submitted && f.contactno.errors }" maxlength="10" />
                            <span class="md-line"></span>
                            <div *ngIf="submitted && f.contactno.errors" class="invalid-feedback error">
                                <div *ngIf="f.contactno.errors.required">Contact No is required</div>
                                <div *ngIf="editForm.get('contactno').hasError('pattern')">Contact No must be a valid
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="md-input-wrapper">
                            <label class="required">Contact email:</label>
                            <input type="text" class="md-form-control md-valid" formControlName="contactemail"
                                name="contactemail" id="contactemail"
                                [ngClass]="{ 'is-invalid': submitted && f.contactemail.errors }" />
                            <span class="md-line"></span>
                            <div *ngIf="submitted && f.contactemail.errors" class="invalid-feedback error">
                                <div *ngIf="f.contactemail.errors.required">Email is required</div>
                                <div *ngIf="f.contactemail.errors.email">Email must be a valid email address</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-sm-6">

                        <div class="md-input-wrapper">
                            <label class="required">Start Date:</label>
                            <p-calendar class="md-form-control md-valid" formControlName="startdate" name="startdate"
                                id="startdate" [ngClass]="{'is-invalid': submitted && f.startdate.errors}"
                                showIcon="true">
                            </p-calendar>
                            <span class="md-line"></span>
                            <div *ngIf="submitted && f.startdate.errors" class="invalid-feedback error">
                                <div *ngIf="f.startdate.errors.required">Start Date required</div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6">

                        <div class="md-input-wrapper">
                            <label class="required">Due Date:</label>
                            <p-calendar class="md-form-control md-valid" dataType="string" formControlName="duedate"
                                name="duedate" id="duedate" [ngClass]="{'is-invalid': submitted && f.duedate.errors}"
                                [minDate]="editForm.value.startdate" showIcon="true">
                            </p-calendar>
                            <span class="md-line"></span>
                            <div *ngIf="submitted && f.duedate.errors" class="invalid-feedback error">
                                <div *ngIf="f.duedate.errors.required">Due Date required</div>
                            </div>
                            <div *ngIf="smallDate" class="invalid-feedback error">Due Date must be greater</div>
                        </div>
                    </div>
                </div>



                <div class="form-group row">
                    <div class="col-sm-4">
                        <div class="md-input-wrapper">
                            <label>Country:</label>
                            <select formControlName="country" name="country" id="country" type="text" class="md-form-control md-valid">
                                <option *ngFor="let obj of countries" [value]="obj.name">{{obj.name}}</option>
                            </select>
                            <span class="md-line"></span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="md-input-wrapper">
                            <label>Currency:</label>
                            <input type="text" class="md-form-control md-valid" formControlName="currency"
                                name="currency" id="currency">
                            <span class="md-line"></span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="md-input-wrapper">
                            <label>Source:</label>
                            <input type="text" class="md-form-control md-valid" formControlName="source" name="source"
                                id="source" />
                            <span class="md-line"></span>
                        </div>
                    </div>
                </div>
                <div class="mtb15">
                    <button (click)="onSubmit()" class="btn btn-success waves-effect waves-light">Update</button> &nbsp;
                    <button (click)=onCancel() class="btn btn-warning waves-effect waves-light">Cancel</button>
                </div>
            </form>

我尝试给 2 div 显示 none，它工作了一些时间，如果我现在删除它们，我将不会获得前 3-4 个字段。我正在将这些所有字段放入我的 editForm 中。但由于这两个错误，它们不具有约束力。

Answer 1

您在 subscribe 回调中构建 reactive form，该回调以异步方式执行。在未创建表单之前，调用 editForm.get 会报错。作为一种可能的解决方案，您可以使用 *ngIf 指令将表单包装在 div 中，以确保表单可用，如下所示：

<div *ngIf="editForm">
    <form [formGroup]="editForm">
        ...
    </form>
</div>

无法读取属性获取未定义的

Cannot read property get of undefined

angular

primeng-datatable

无法读取 属性 获取未定义的

Cannot read property get of undefined

angular

primeng-datatable

无法读取属性获取未定义的