表单数组中的表单控件未定义

时间:2019-02-21 07:52:23

标签: angular angular-forms

我是angular的新手,我新添加的表单控件遇到问题。该formcontrol在用户中不可见。

,“结果”可以完美运行,但是我新添加的“包含”会产生不确定的结果
this.ATests.at(index).patchValue({include: 1});
alert(this.ATests.controls[index].value.include);

在我的itsMine.component.ts中。无论如何,这是复选框事件,请参阅下面的代码以了解更多详细信息。预先谢谢好人。


这是我的 itsMine.model.ts

export class ATbl {
    result: string;
    include: number;
  constructor (ATblForm){
      this.result=ATblForm.result || '';
      this.include=AtblForm.include || '';
  }
}

这是我的 itsMine.component.html

<form [formGroup]="AFormGroup">
    <div formArrayName="ATests" >
        <div fxlayout="row" fxLayoutAlign="center center" *ngFor="let test of ATests.controls; let i=index" [formGroupName]="i">
            <mat-checkbox [id]="'chkInclude_' + i"
                      (click)="setIncludeValue(i,$event)">
            </mat-checkbox>
        </div>
    </div>
</form>

这是我的 itsMine.component.ts

AFormGroup : FormGroup;

constructor(
    private fb: FormBuilder
){
    this.AFormGroup = this.fb.group({
        ATests: this.fb.array([])
    });
}

setIncludeValue(index,event) {
    this.ATests.at(index).patchValue({include: 1});
    alert(this.ATests.controls[index].value.include);
}

我想念什么吗?非常感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

首先,您缺少ATests吸气剂。您必须在FormGroup中插入FormControlFormArray。然后,您可以编写类似

的内容
this.ATests.at(index).patchValue({include: 1});

警报中的语句也是错误的。

这是一个示例,说明如何使用FormArray修补程序启动表单以获取一些值并获取数据。

AFormGroup : FormGroup;

constructor(private fb: FormBuilder){
    this.AFormGroup = this.fb.group({
        ATests: this.fb.array([])
    });
    this.setIncludeControl();
    this.setIncludeValue(0,12);
}

get ATests() {
    return this.AFormGroup.get('ATests') as FormArray;
}

setIncludeControl() {
    this.ATests.push(
        this.fb.group({
            include: []
        })
    );
}

setIncludeValue(index, value) {
    this.ATests.at(index).patchValue({include: value});
    console.log(this.ATests.at(index).get('include').value);
}

Here,您可以找到完整的演示。