Question

我正在尝试创建一个表单，用户可以在其中添加对主要贡献的多个修订。我已经按照Angular Reactive Forms演示here并使用模型中填充的FormArray，并在HTML中的ngFor循环以重复表单上的控件。页面加载时出现以下错误。 Cannot find control with path: 'addAmendmentGroups -> 0 -> addAmendmentArrayId' Cannot find control with path: 'addAmendmentGroups -> 0 -> memberId' 当我单击+按钮向页面添加更多控件时，我得到的错误与每个控件相同。我确定有一些我不知道的东西，或者这对Angular5不起作用？旁白：是的，我知道addAmendmentGroups是FormArray的可怕名称。

Model.ts

export class Contribution {
  amendments: Amendment[];
}

export class Amendment {
  addAmendmentArrayId: number;
  listType: ListType;
  numberReference: number;
  whiteListId: number;
  whiteListReference: number;
  memberId: number[];
}

export enum ListType {
  Numbered = 0,
  White = 1
}

Component.ts

export class AmendmentFormComponent implements OnChanges {
  @Input()
  contribution: Contribution;

  form: FormGroup;

  public amendmentView: string;

  constructor(private fb: FormBuilder) { this.createForm(); }

  propagateChange = (_: any) => {};
  propagateTouch = (_: any) => {};

  createForm() {
    this.form = this.fb.group({
      listType: 0,

      addAmendmentGroups: this.fb.array([
        this.fb.group({
          addAmendmentGroupId: 0,
          listType: 0,
          numberedListReference: [{ value: 0, disabled: false }, Validators.required],
          whiteListId: [{ value: 0, disabled: true }, Validators.required],
          whiteListNumberReference: [{ value: 0, disabled: true }, Validators.required],
          memberName: ['', Validators.required]
        })
      ]),
      foobar: ''
    });
  }

  ngOnChanges() {
    this.rebuildForm();
  }

  rebuildForm() {
    this.form.reset({
      listType: 0,
      foobar:''
    });
    this.setAmendments(this.contribution.amendments);
  }

  get addAmendmentGroups(): FormArray {
    return this.form.get('addAmendmentGroups') as FormArray;
  }

  setAmendments(amendments: Amendment[]) {
    const amendmentFGs = amendments.map(amendment => this.fb.group(amendment));
    const amendmentFormArray = this.fb.array(amendmentFGs || []);
    this.form.setControl('addAmendmentGroups',amendmentFormArray);
  }
  addAmendment() {
    this.addAmendmentGroups.push(this.fb.group(new Amendment()));
  }
}

Component.html

<div class="content">
  <p>Form Value:{{ form.value | json }}</p>
  <h4 class="content-title">Add amendment</h4>
  Amendment View Id :<strong>{{ amendmentView }}</strong>
  <form [formGroup]="form">
    <div formArrayName="addAmendmentGroups">
      <div *ngFor="let amendment of form.controls.addAmendmentGroups.controls; let i = index" >
        <div [formGroupName]="i">

          <input type="text" formControlName="addAmendmentArrayId" value="{{addAmendmentArrayId}}">
          <div class="row form-item">
            <div class="col-lg-2 item-instance">
              <ul class="radio-list">
                <li>
                  <input type="radio" formControlName="listType" [value]="0" name="listType" checked data-test="listTypeNumbered" tabindex="1" />
                  <span>Numbered List</span>
                </li>
                <li>
                  <input type="radio" formControlName="listType" [value]="1" name="listType" data-test="listTypeWhite" tabindex="3" />
                  <span>Whitelist</span>
                </li>
              </ul>
            </div>
          </div>
          Index={{i}}<br />
          <input type="text" formControlName="numberedListReference" [placeholder]="NUMBEREDLISTREFERENCE" data-test="numberedListReference" tabindex="2" />Reference
          <input type="number" formControlName="whiteListId" />
          <input type="text" formControlName="whiteListNumberReference" [placeholder]="WHITELISTREFERENCE" data-test="whiteListNumberReference" tabindex="5" />White
          <input type="number" formControlName="memberId" />
          <!--<oir-amendment-group [formControlName]="i"></oir-amendment-group>-->
          <br />
        </div>

      </div>
    </div>
    <input type="text" formControlName="foobar" value="" id="" />
    <button (click)="addAmendment()">+</button>
  </form>
</div>

更新我修复了模型和组件之间的引用错误，并解决了加载时的错误。单击“添加”按钮时，我更新了我的组件以推送formGroup。但是，这只是推送现有的表单组，而不是表单组的新实例。

createForm() {
    this.amendmentForm = this.fb.group({
      //addAmendmentArrayId: 0,
      listType: 0,
      numberReference: [{ value: 0, disabled: false }, Validators.required],
      whiteListId: [{ value: 0, disabled: true }, Validators.required],
      whiteListReference: [{ value: 0, disabled: true }, Validators.required],
      memberId: ['', Validators.required]
    })
    this.form = this.fb.group({
      addAmendmentGroups: this.fb.array([
        this.amendmentForm
      ]),
      foobar: ''
    });
}
  addAmendment() {
this.addAmendmentGroups.push(this.amendmentForm);

} 有没有办法将modificationForm的新实例推送到formArray中，我知道我可以使用this.addAmendmentGroups.push(new Amendment())推送模型的实例，但这不允许进行字段验证。

Answer 1

您的表单上不存在

addAmendmentArrayId和memberId。

this.fb.group({
          addAmendmentGroupId: 0,
          listType: 0,
          numberedListReference: [{ value: 0, disabled: false }, Validators.required],
          whiteListId: [{ value: 0, disabled: true }, Validators.required],
          whiteListNumberReference: [{ value: 0, disabled: true }, Validators.required],
          memberName: ['', Validators.required]
        })

如果我读了你的模板，你的formarray中的表格组应该是

 this.fb.group({
          addAmendmentArrayId : 0,
          addAmendmentGroupId: 0,
          listType: 0,
          numberedListReference: [{ value: 0, disabled: false }, Validators.required],
          whiteListId: [{ value: 0, disabled: true }, Validators.required],
          whiteListNumberReference: [{ value: 0, disabled: true }, Validators.required],
          memberName: ['', Validators.required],
          memberId: ['', Validartors.required]
        })

编辑：我不知道你是否想要这个，但你的模型与你的表格组有很大不同。

根据您Model.ts的模型，您的表单组不应该是这样的吗？

 this.fb.group({
      addAmendmentArrayId: 0,
      listType: 0,
      numberReference: [{ value: 0, disabled: false }, Validators.required],
      whiteListId: [{ value: 0, disabled: true }, Validators.required],
      whiteListReference: [{ value: 0, disabled: true }, Validators.required],
      memberId: ['', Validators.required]
    })

Angular 5 Reactive form无法通过路径找到控件：＆＃39; addAmendmentGroups - ＆gt; 0 - ＆gt; addAmendmentArrayId＆＃39;

1 个答案: