具有多个嵌套表单组的角度表单

Question

为什么这不起作用？该按钮不起作用，我怀疑该表单也不起作用。这只是我正在工作的更大更复杂的表单/表单组的一个示例。较大的情况是使用有角度的材料，并给出许多与找不到第二个嵌套形式组和

Error: mat-form-field must contain a MatFormFieldControl

有关的错误。

import 'zone.js/dist/zone';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  template: `
    <h1>Multiple From Groups</h1>

    <div [formGroup]="myForm" (ngSubmit)="logForm()">
      <input formControlName="a">
      <div formGroupName="nestedGroupOne">
        <input formControlName="b">
      </div>
      <div formGroupName="nestedGroupTwo">
        <input formControlName="c">
      </div>
      <button type="submit">log form</button>
    </div>
  `,
})
export class App {
  myForm = this.fb.group({
    a: 'a',
    nestedGroupOne: this.fb.group({
      b: 'b',
    }),
    nestedGroupTwo: this.fb.group({
      c: 'c',
    }),
  });

  constructor(private fb: FormBuilder) {}
  logForm() {
    console.log('xyz');
    console.log(this.myForm);
  }
}

bootstrapApplication(App);

在 stackblitz 上编写的代码，角度为 16

期望一种形式具有多个嵌套组。

Answer 1

您提供的代码在创建表单组和表单控件方面似乎是正确的。但是，您尝试引导 Angular 应用程序的方式存在问题。

您似乎正在尝试使用名为 bootstrapApplication 的方法来引导应用程序，该方法不是用于引导应用程序的标准 Angular 方法。在典型的 Angular 应用程序中，您可以使用

platformBrowserDynamic().bootstrapModule() method

来引导您的应用程序模块。

以下是引导 Angular 应用程序的方法：

import 'zone.js/dist/zone';
import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { FormBuilder } from '@angular/forms';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

@Component({
  selector: 'my-app',
  template: `
    <h1>Multiple Form Groups</h1>
    <div [formGroup]="myForm" (ngSubmit)="logForm()">
      <input formControlName="a">
      <div formGroupName="nestedGroupOne">
        <input formControlName="b">
      </div>
      <div formGroupName="nestedGroupTwo">
        <input formControlName="c">
      </div>
      <button type="submit">log form</button>
    </div>
  `,
})
export class App {
  myForm = this.fb.group({
    a: 'a',
    nestedGroupOne: this.fb.group({
      b: 'b',
    }),
    nestedGroupTwo: this.fb.group({
      c: 'c',
    }),
  });

  constructor(private fb: FormBuilder) {}
  logForm() {
    console.log('xyz');
    console.log(this.myForm);
  }
}

@NgModule({
  declarations: [App],
  imports: [BrowserModule, ReactiveFormsModule],
  bootstrap: [App]
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

在更新的代码中，我创建了一个 AppModule 并使用

platformBrowserDynamic().bootstrapModule(AppModule)

来引导应用程序。此外，我已将 BrowserModule 包含在 AppModule 的导入中，以便在浏览器环境中正确引导应用程序。