Question

我的反应形式看起来像这样。

@Component({
  selector: 'app-add-problem',
  templateUrl: './add-problem.component.html',
  styleUrls: ['./add-problem.component.css']
})
export class AddProblemComponent implements OnInit {

  public addProblemForm:FormGroup;
  @Input() baseImageUrl;
  @Input() topicId;
  @Input() topicName="Must Select a topic to proceed";

  constructor(private _fb:FormBuilder) { }

  ngOnInit() {
    this.addProblemForm=this._fb.group({
      Name:['',[Validators.required,Validators.minLength(5)]],
      TopicId:[5,[Validators.required]],
      Order:['',Validators.required],
      Description:[''],
      QuestionTag:[''],
      Type:['',Validators.required],
      BaseImageUrl:[this.baseImageUrl,Validators.required],
      ProblemJson: this._fb.group({
        QuestionText:this._fb.array([]),
        Option1Text:this._fb.array([]),
        Option2Text:this._fb.array([]),
        Option3Text:this._fb.array([]),
        Option4Text:this._fb.array([]),
        SolutionText:this._fb.array([]),
        CorrectOption:this._fb.group(
          {
            A:[false],
            B:[false],
            C:[false],
            D:[false]
          }
        )
      })

    });

    this.addProblemJsonControls();
  }

  initQuestionParts(){
    return this._fb.group({
      Type: ['', Validators.required],
      Text:['',Validators.required]
    })
  }

  addProblemJsonControls(){
    const control1 = <FormArray>this.addProblemForm.controls['ProblemJson']['QuestionText'];
    control1.push(this.initQuestionParts());
    const control2 = <FormArray>this.addProblemForm.controls['ProblemJson']['Option1Text'];
    control2.push(this.initQuestionParts());
    const control3 = <FormArray>this.addProblemForm.controls['ProblemJson']['Option2Text'];
    control3.push(this.initQuestionParts());
    const control4 = <FormArray>this.addProblemForm.controls['ProblemJson']['Option3Text'];
    control4.push(this.initQuestionParts());
    const control5 = <FormArray>this.addProblemForm.controls['ProblemJson']['Option4Text'];
    control5.push(this.initQuestionParts());
    const control6 = <FormArray>this.addProblemForm.controls['ProblemJson']['SolutionText'];
    control6.push(this.initQuestionParts());
  }

在addProblemJsonControls（）方法中，我试图访问ProblemJson Form Group的不同控件，但是我收到的错误是

EXCEPTION: Uncaught (in promise): Error: Error in :0:0 caused by: Cannot read property 'push' of undefined
Error: Error in :0:0 caused by: Cannot read property 'push' of undefined

请帮我正确访问FormGroup。我是Reactive Form的新手。

Answer 1

我在经过数小时的挫折之后才解决了这个问题。一些想法：

访问其评论

Simon Z。

确保HTML部分也正确构建

来自Angular文档的

This example确实帮助了我。

访问控件

this.addProblemForm = this._fb.group({
     ProblemJson: this._fb.group({
        QuestionText:this._fb.array([]),
        Option1Text:this._fb.array([])
});
const control1 = <FormArray>this.addProblemForm.get('ProblemJson.QuestionText‌');

HTML方面： 您确实需要组件TS和HTML部件一起正确，否则您可能会收到错误。你没有发布HTML，但只是添加到它，它看起来像：

<form [formGroup]="addProblemForm">
     <div formGroupName="ProblemJson">
          <div formArrayName="QuestionText"></div>
          <div formArrayName="Option1Text"></div>
     </div>
</form>

这里的关键是 FormGroup的结构/嵌套必须完全匹配TypeScript和HTML 。你可能不关心＆＃34; ProblemJson＆＃34;例如，HTML中的FormGroup，但您必须声明它。这是我的问题，至少。

以反应形式@ angular2访问嵌套的FormControls

1 个答案: