如何使用 ssr 应用程序使我的 formControlName 在 Angular 17 的子输入组件中工作

Question

我收到此错误：

main.ts:6 ERROR Error: NG01050: formControlName must be used with a parent formGroup directive.  You'll want to add a formGroup
      directive and pass it an existing FormGroup instance (you can create one in your class).

    Example:

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

  In your class:

  this.myGroup = new FormGroup({
      firstName: new FormControl()
  });
    at controlParentException (forms.mjs:1555:10)
    at _FormControlName._checkParentType (forms.mjs:5902:15)
    at _FormControlName._setUpControl (forms.mjs:5907:10)
    at _FormControlName.ngOnChanges (forms.mjs:5857:28)
    at _FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (core.mjs:4101:14)
    at callHookInternal (core.mjs:5136:14)
    at callHook (core.mjs:5167:9)
    at callHooks (core.mjs:5118:17)
    at executeInitAndCheckHooks (core.mjs:5068:9)
    at selectIndexInternal (core.mjs:11029:17)

这是我的父组件：

我想访问我的应用程序输入中的目标属性到 formControlName

import { Component, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import {
  FormControl,
  FormGroup,
  FormsModule,
  ReactiveFormsModule,
} from '@angular/forms';

import { DatePickerComponent } from '../date-picker/date-picker.component';
import { InputComponent } from '../input/input.component';
import { SelectComponent } from '../select/select.component';

import { roomsAndGuestsData } from '../../../constants';
import { ButtonComponent } from '../button/button.component';

@Component({
  selector: 'hero',
  standalone: true,
  imports: [
    FormsModule,
    ReactiveFormsModule,
    DatePickerComponent,
    InputComponent,
    SelectComponent,
    ButtonComponent,
  ],
  templateUrl: './hero.component.html',
})
export class HeroComponent {
  roomAndGuestsData = roomsAndGuestsData;

  public isBrowser = isPlatformBrowser(this.platformId);

  constructor(@Inject(PLATFORM_ID) private platformId: any) {}

  bookingForm = new FormGroup({
    destination: new FormControl<string>(''), 
  });

  handleSubmit() {
    console.log(this.bookingForm.value);
  }
}

这是我的家长表格：

  <form [formGroup]="bookingForm"
          class="w-full shadow-xl drop-shadow-2xl -translate-y-1/2 z-10 bg-white ring-0 rounded-xl py-8 px-6 flex flex-col gap-6"
        >
          <h2 class="text-xl font-semibold text-blackish-green">
            Where are you flying?
          </h2>

          <div class="flex flex-wrap gap-4">
            <app-input
              class="w-full sm:w-[calc(100%/2-8px)] lg:flex-1"
              customClass="w-full"
              label="Destination"
              placeholder="City, Country"
              icon="ionBed"
              controlName="destination"
            ></app-input>
          </div>
          <div
            class="flex flex-col-reverse md:flex-row gap-6 items-end md:items-stretch md:justify-end"
          >
            <p class="flex items-center gap-1 cursor-pointer text-sm">
              <span class="text-xl md:text-2xl">+</span> Add Promo Code
            </p>
            <app-button
              class="w-full md:w-auto"
              customClass="w-full"
              text="Show Places"
              icon="heroBuildingOffice2Solid"
            ></app-button>
          </div>
        </form>

这里是子输入组件，我正在获取要绑定的属性的 controlName。：

import { Component, Input } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { NgIconComponent, provideIcons } from '@ng-icons/core';

import { ionBed } from '@ng-icons/ionicons';

@Component({
  selector: 'app-input',
  standalone: true,
  imports: [NgIconComponent, ReactiveFormsModule],
  templateUrl: './input.component.html',
  viewProviders: [provideIcons({ ionBed })],
})
export class InputComponent {
  @Input() label?: string = '';
  @Input() placeholder?: string = '';
  @Input() type: string = 'text';
  @Input() value: string = '';
  @Input() disabled: boolean = false;
  @Input() icon: string = '';
  @Input() customClass?: string = '';

  @Input() controlName: string = '';

  id = 'custom-input-' + Math.random().toString(36).substring(2, 11);
}

它是 formControlName 中的子模板，我正在尝试访问它，但我收到了上面提供的错误：

<div [class]="'relative h-14'">
  <input
    [id]="id"
    [type]="type"
    [placeholder]="placeholder"
    [class]="
      'absolute left-0 right-0 top-0 bottom-0 pl-4 pr-10 rounded-[4px] outline-none font-normal text-blackish-green border border-light-grey placeholder:text-blackish-green/85 ' +
      customClass
    "
    [formControlName]="controlName"
  />
  @if (label) {
  <label
    [for]="id"
    class="absolute left-3 -top-[7.5px] bg-white text-blackish-green px-1 text-base font-normal leading-[17px] z-10"
  >
    {{ label }}
  </label>
  } @if(icon){

  <ng-icon
    [name]="icon"
    class="absolute right-3 top-1/2 -translate-y-1/2 text-2xl"
  ></ng-icon>
  }
</div>

我使用 Angular 17，互联网上没有太多关于它的信息。我尝试了 youtube、AI、文档、官方不和谐服务器。

Answer 1

如果您在“子组件”中使用 viewProvider，则无需将您的输入“包含”在 formGroup 下

selector: 'hero',
  standalone: true,
  imports: [...]
  viewProviders:[{ provide: ControlContainer, useExisting: NgForm }]
})

否则您需要将父级的 formGroup 作为输入传递。