Question

我正在为此界面创建一个表单（例如）：

interface Main {
    name: string;
    inners: Main[];
}

抱歉命名为：P

我要做的是有一个表单，你可以随时添加额外的Main，每个内部Main也可以添加自己的内部Main }秒。
但是我不知道如何在原始Main内实现Main的递归，关于反应形式。

我正在使用FormBuilder，正在关注the example on the docs。

我知道这不是很多数据，但我现在的代码中没有任何基本的数据。

Answer 1

经过一番思考，我解决了这个问题！

因此，如果您按照教程进行操作，您的组件中将包含与此类似的代码：

export class HeroDetailComponent3 {
  heroForm: FormGroup; // <--- heroForm is of type FormGroup

  constructor(private fb: FormBuilder) { // <--- inject FormBuilder
    this.createForm();
  }

  createForm() {
    this.heroForm = this.fb.group({
      name: '', // <--- the FormControl called "name"
    });
  }
}

所以我做了什么，我将FormGroup更改为@Input() heroForm: FormGroup = null，
我添加了一种方法来获取FormGroup索引：

innerMainAt(index: number): FormGroup {
    return this.inners.at(index) as FormGroup;
}

我已经通过以下方式在html中使用了它：

<div formArrayName="inners">
    <div *ngFor="let inner of inners.controls; let i=index;" [formGroupName]="i">
        // VVV this is the component, and it creates itself
        <app-hero-form [heroForm]="innerMainAt(i)"</app-hero-form> // notice innerMainAt(i)
    </div>
</div>

角度反应形式 - “递归”形式

1 个答案: