在父FormGroup中构建子FormArray

Question

我正在尝试使用子 FormGroup 构建一个反应式表单，以使其更具可读性。 其中一个 formGroup 包含一个 formArray。我不知道我缺少什么才能使它作为儿童形式工作。我对 formGroup“描述”使用相同的逻辑，并且效果很好。

但是数组的形式有问题。我有一个错误：未解析的变量或类型rewardDistributionArrayControl。

我认为我误解了子 formArray 应该如何在这里工作，因为我认为我不必声明这个变量。任何帮助将不胜感激。

RewardGameForm.ts：

export class RewardGameForm extends FormGroup {
constructor() {
    super({
        description: new FormGroup({
            name: new FormControl(''),
            application: new FormControl(''),
            items: new FormControl(''),
            duration: new FormControl(''),
        }),
        fullscreen: new FormGroup({
            isDisplayFullscreen: new FormControl(false),
        }),
        rewardDistributionGroup: new FormGroup({
            rewardDistribution: new FormArray([]),
        }),
    });
}

public get rewardDistributionGroupControl(): FormGroup {
    return this.get('rewardDistributionGroup') as FormGroup;
}

public get rewardDistributionArrayControl(): FormArray {
    return this.get('rewardDistributionGroup.rewardDistribution') as FormArray;
}

父组件html：

                <form[formGroup]="rewardGameForm" (ngSubmit)="onSubmit()">
                <div>
                    <child-form-one formGroupName="description"/>
                    <child-form-two formGroupName="rewardDistributionGroup"/>
                </div>
            </form>

父组件：

export class RewardGamesDetailsComponent implements OnInit {
    @Input() public id?: string;
    public readonly RewardGameDetailViewMode = RewardGameDetailViewMode;
    private readonly changeDetectorRef = inject(ChangeDetectorRef);
    private readonly destroyRef = inject(DestroyRef);
    private readonly store = inject(Store);
    private readonly router = inject(Router);
    public rewardGame?: RewardGame;
    public viewMode?: RewardGameDetailViewMode;
    public rewardGameForm: RewardGameForm;

    public freespinsRewards: Observable<Freespin[]> = this.store.select(freespinsListSelectors.selectFreespins);

    public ngOnInit(): void {
        if (this.id) {
            this.getRewardGame(this.id);
            this.setRewardGame(this.id);
        } else {
            this.viewMode = RewardGameDetailViewMode.add;
            this.rewardGameForm = new RewardGameForm();
        }
    }

    public getRewardGame(id: string): void {
        this.store.dispatch(rewardGamesActions.getRewardGame({ rewardGameId: id }));
        this.store.dispatch(freespinsListActions.getFreespins());
    }

    public setRewardGame(id: string) {
        this.store
            .pipe(select(rewardGamesSelectors.selectRewardGame(id)), takeUntilDestroyed(this.destroyRef))
            .subscribe((rg: RewardGame | undefined) => {
                this.rewardGame = rg;
                this.setViewModeByRewardGameStatus(rg);
                this.populateFormIfStatusInDesign(rg);
                this.changeDetectorRef.detectChanges();
            });
    }

    public setViewModeByRewardGameStatus(rewardGame: RewardGame) {
        if (
            rewardGame &&
            (rewardGame.status === RewardGamesStatus.active || rewardGame.status === RewardGamesStatus.deactivated)
        ) {
            this.viewMode = RewardGameDetailViewMode.read;
        } else if (rewardGame && rewardGame.status === RewardGamesStatus.inDesign) {
            this.viewMode = RewardGameDetailViewMode.edit;
        }
    }

    private populateFormIfStatusInDesign(rewardGame: RewardGame): void {
        if (rewardGame && rewardGame.status === RewardGamesStatus.inDesign) {
            this.rewardGameForm = new RewardGameForm();
            this.rewardGameForm.populateForm(rewardGame);
        }
    }

    // Todo
    public save(): void {
    }
}

子表单组件：

export class RewardGamesDetailsDistributionComponent implements OnInit {
@Input() public formGroupName!: string;

protected readonly trackByIndex = trackByIndex;
private rootFormGroup = inject(FormGroupDirective);
public form: FormGroup;

ngOnInit(): void {
    this.form = this.rootFormGroup.control.get(this.formGroupName) as FormGroup;
}

}

子表单组件 html :

<form class="forms full-width" [formGroup]="form">
<ng-container formArrayName="rewardDistribution">
    <ng-container *ngFor="let reward of rewardDistributionArrayControl.controls; let i = index">
        <div [formGroupName]="i">
            <label>
                <input type="checkbox" formControlName="isJackpot" />
                Is Jackpot
            </label>
            <input type="text" formControlName="type" />
            <input type="text" formControlName="quantity" />
            <input type="text" formControlName="unitaryValue" />
            <input type="text" formControlName="freespin" />
        </div>
    </ng-container>
</ng-container>

Answer 1

您可以尝试更改以下行吗？因为该方法存在于

rootFormGroup

内部，大部分不是子组件！

<form class="forms full-width" [formGroup]="form">
<ng-container formArrayName="rewardDistribution">
    <ng-container *ngFor="let reward of rootFormGroup.rewardDistributionArrayControl.controls; let i = index">
        <div [formGroupName]="i">
            <label>
                <input type="checkbox" formControlName="isJackpot" />
                Is Jackpot
            </label>
            <input type="text" formControlName="type" />
            <input type="text" formControlName="quantity" />
            <input type="text" formControlName="unitaryValue" />
            <input type="text" formControlName="freespin" />
        </div>
    </ng-container>
</ng-container>