'missingFormException ' 在 Angular 中使用 Reactive 表单？

Question

我遇到了一些我不知道如何处理的奇怪行为。

我有一个模板，它是一个很大的表单，但我只会在显示错误的地方显示单个输入字段。

    <form [formGroup]="myForm" (ngSubmit)="submitForm()" class="row g-3 needs-validation" novalidate>

                <div class="col-md-4">
                  <label for="idCourse" class="form-label">ID</label>
                  
                  <input type="text" class="form-control" [value]="course['id']"  disabled id="idCourse" >
                </div>
    </form>

现在，在 .ts 文件中，我基本上是从服务中获取 DTO 并使用一组 FormGroup 初始化 FormControl。它们都正常工作并按预期映射到模板上。但是一旦我从后端使用服务，我就会收到一个错误。

 initReactiveForm() {
            
        this.myForm = this.fb.group({
         // id:[this.course['id'],   [ ]], since this input field is disabled I'm not adding it to form, but I tried adding it as well, didn't do the job
          name:[this.course['name'], [Validators.required, Validators.minLength(3),  Validator.cannotContainWhitespaceOnly]],
    
        })
    
 }

里面ngOnInit()

ngOnInit(): void {

    this.activatedRoute.paramMap.subscribe(params => {
      var courseId = params.get('courseIdPlaceholder');

      //some custom validation and simple checks...
    
      if (courseId) {
        

        //check in service layer if Course exists for given Id; this won't work
        this.firebaseService.getCourseById(courseId).subscribe(course => {

           this.course = course ;
           this.initReactiveForm();

        });

        //this.course = Builider(Course).id("1").build(); but this works if I comment out above code which fetches Course from service
       // this.initReactiveForm();

      } else {
        alert("Not valid id!")
        this.router.navigate(["/home"]);
        return;
      }

    });
    
  }

我遇到的错误如下所示：

    core.mjs:6485 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.mjs:1494:12)
    at FormGroupDirective._checkFormPresent (forms.mjs:5523:19)
    at FormGroupDirective.ngOnChanges (forms.mjs:5296:14)
    at FormGroupDirective.rememberChangeHistoryAndInvokeOnChangesHook (core.mjs:1508:1)
    at callHook (core.mjs:2552:1)
    at callHooks (core.mjs:2511:1)
    at executeInitAndCheckHooks (core.mjs:2462:1)
    at selectIndexInternal (core.mjs:8405:1)
    at Module.ɵɵadvance (core.mjs:8388:1)
at CourseComponent_Template (course.component.html:9:59)

第 course.component.html:9:59 行指向模板中 [value]="course['id'] 的开头。

如果我不使用 firebaseService 并且只是硬编码一个对象，this.course = Builider(Course).id("1").build(); 然后，表单填充并且一切正常并且控制台中没有错误。

这是服务：

public getAllCourses() : Observable<Course[]>{
    return this.fireDb.list<Course>('courses').valueChanges();
   
}

我实际上是从 Firebase 获取所有课程，在 subscribe() 我学习了第一门课程。一切都是 console.log-ed，我有我想要的价值观。但是模板在我获取对象之前以某种方式呈现。

需要说明的是，我的表单实际上已被填充，但我遇到了这个让我非常恼火的错误。

Answer 1

由于您在 paramMap 和 getCourseById 的 subscribe 中同步初始化 myForm FromGroup，因此组件模板将无法（同时初始化）以在 initReactiveForm 方法中初始化它之前识别为 null 的 myForm 实例。

我认为要解决此问题，您需要：

添加*ngIf="myForm"，仅在初始化myForm后渲染form元素。
或直接在 ngOnInit 中初始化 myForm，然后一旦数据来自 getCourseById，您就可以 patchValue 到它。

'missingFormException ' 在 Angular 中使用 Reactive 表单？

'missingFormException ' in Angular using Reactive forms?

observable

rxjs

angular

angular-reactive-forms