Error: formGroup expects a FormGroup instance. Please pass one in., core.js:6479 ERROR TypeError: Cannot read properties of undefined (reading 'get')

Question

我正在尝试获取员工的详细信息，然后对其进行编辑。我在详细信息表单中获取了正确的详细信息值，但在编辑中，我无法获取编辑表单中的值并出现以下错误（最后提供）。

Error: formGroup expects a FormGroup instance. Please pass one in. TypeError:Cannot read properties of undefined (reading 'setValue') TypeError: Cannot read properties of undefined (reading 'get')

正在使用 getFormContent() 在编辑表单中设置这些值。这不起作用

如果有人能向我解释错误并指出方向。谢谢

export class AddEditEmpPersonalComponent implements OnInit {

  form: FormGroup;
  empOfficialDetails: Employee;
  employeePersonalDetails : EmployeePersonalDetails;
  editMode: boolean = false;
  employeeCreatedOrUpdated : boolean = false;
  formTitle : string;
  successMessage: string;
  employeeId : string;
  selectedFile: File = null;
  url : any;

  constructor(
    private fb: FormBuilder, 
    private employeeService : EmployeeService,
    private route : ActivatedRoute) {
      var id = this.route.snapshot.paramMap.get('id');
      this.employeeId = id;
              
              
      this.employeeService.getEmployeePersonalDetails(this.employeeId)
        .subscribe(data => {
          this.employeePersonalDetails = data;
          if (this.employeePersonalDetails = null)
          {
            alert("create");
            this.editMode = false;
            this.createForm();
            this.formTitle ="Add Employee Personal Details";
            this.successMessage = "Employee Personal Details Added";
            this.employeeCreatedOrUpdated = true;
          }
          else
          {
            alert("edit")
            alert("hi");
            alert(this.employeePersonalDetails.id);
            alert(this.employeePersonalDetails.nationality);
            alert("hello");
            this.editMode = true;
            this.getFormContent();
            this.formTitle ="Update Employee Personal Details";
            this.successMessage = "Employee Personal Details Updated";
            this.employeeCreatedOrUpdated = true;
            //edit
          }
        }
      )
  }

这是创建表单

createForm(){
  this.form = this.fb.group({
      
    "id": this.employeeId, // why does this say unknown property
    "fullName": this.empOfficialDetails.firstName+ " " +this.empOfficialDetails.middleName + " " + this.empOfficialDetails.lastName,
    "photo": [''],

    "dateOfBirth": [''],
    "nationality": [''],
    ...........
  })
}

这是 getFormContent()，它应该预填充表单中的数据以供编辑

getFormContent(){
  this.form.setValue({ 
    fullName: this.employeePersonalDetails.fullName || '',
    photo:this.employeePersonalDetails.photo || '',
    bankName: this.employeePersonalDetails.bankName || '',
    branch: this.employeePersonalDetails.branch  || '',
    .........
  })
}

我在检查网络时得到了正确的值

但我收到以下错误

core.js:6479 ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

      Example:

      
  <div [formGroup]="myGroup">
    <input formControlName="firstName">
  </div>

  In your class:

  this.myGroup = new FormGroup({
      firstName: new FormControl()
  });
    at missingFormException (forms.js:1497)
    at FormGroupDirective._checkFormPresent (forms.js:5520)
    at FormGroupDirective.ngOnChanges (forms.js:5293)
    at FormGroupDirective.rememberChangeHistoryAndInvokeOnChangesHook (core.js:1498)
    at callHook (core.js:2536)
    at callHooks (core.js:2495)
    at executeInitAndCheckHooks (core.js:2446)
    at refreshView (core.js:9480)
    at refreshEmbeddedViews (core.js:10590)
    at refreshView (core.js:9489)
defaultErrorLogger @ core.js:6479
handleError @ core.js:6527
(anonymous) @ core.js:29691
invoke @ zone.js:372
run @ zone.js:134
runOutsideAngular @ core.js:28572
tick @ core.js:29691
(anonymous) @ core.js:29539
invoke @ zone.js:372
onInvoke @ core.js:28673
invoke @ zone.js:371
run @ zone.js:134
run @ core.js:28527
next @ core.js:29538
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:25936
checkStable @ core.js:28595
onHasTask @ core.js:28690
hasTask @ zone.js:426
_updateTaskCount @ zone.js:447
_updateTaskCount @ zone.js:274
runTask @ zone.js:195
drainMicroTaskQueue @ zone.js:582
invokeTask @ zone.js:491
invokeTask @ zone.js:1600
globalZoneAwareCallback @ zone.js:1626

core.js:6479 ERROR TypeError: Cannot read properties of undefined (reading 'get')
    at FormGroupDirective.addControl (forms.js:5346)
    at FormControlName._setUpControl (forms.js:5929)
    at FormControlName.ngOnChanges (forms.js:5874)
    at FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (core.js:1498)
    at callHook (core.js:2536)
    at callHooks (core.js:2495)
    at executeInitAndCheckHooks (core.js:2446)
    at refreshView (core.js:9480)
    at refreshEmbeddedViews (core.js:10590)
    at refreshView (core.js:9489)


core.js:6479 ERROR TypeError: Cannot read properties of undefined (reading 'setValue')
    at AddEditEmpPersonalComponent.getFormContent (add-edit-emp-personal.component.ts:146)
    at SafeSubscriber._next (add-edit-emp-personal.component.ts:58)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
    at SafeSubscriber.next (Subscriber.js:122)
    at Subscriber._next (Subscriber.js:72)

Answer 1

使用现有代码，在呈现 HTML 之前未初始化 form。

form: FormGroup;

form 实例仅在 employeeService returns Observable.

之后创建

this.employeeService
      .getEmployeePersonalDetails(this.employeeId)
      .subscribe((data) => {
        this.employeePersonalDetails = data;
        if ((this.employeePersonalDetails = null)) {
          ...
          this.createForm();
          ...
        } else {
          ...
          this.getFormContent();
          ...
        }
      });

解决方案

在渲染 HTML 之前，您必须首先实例化 form。

.component.ts

constructor(
  private fb: FormBuilder,
  private employeeService: EmployeeService,
  private route: ActivatedRoute
) {
  var id = this.route.snapshot.paramMap.get('id');
  this.employeeId = id;

  this.initForm();

  this.employeeService
    .getEmployeePersonalDetails(this.employeeId)
    .subscribe((data) => {
      ...
    });
}

initForm() {
  this.form = this.fb.group({
    id: ['']
    fullName: [''],
    photo: [''],

    dateOfBirth: [''],
    nationality: [''],
  });
}

Sample Demo on StackBlitz

注：

建议按照的建议将所有初始化工作移至 ngOnInit() 方法。

Error: formGroup expects a FormGroup instance. Please pass one in., core.js:6479 ERROR TypeError: Cannot read properties of undefined (reading 'get')

Error: formGroup expects a FormGroup instance. Please pass one in., core.js:6479 ERROR TypeError: Cannot read properties of undefined (reading 'get')

angular

typescript

angular-reactive-forms

angular11

解决方案