1

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

@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。我是反应形式的新手。

4

1 回答 1

3

经过数小时的挫折，我自己解决了这个问题。几个想法：

  • 访问Simon Z.在他的评论中建议的控件
  • 确保 HTML 部分也正确构建

Angular 文档中的这个例子对我很有帮助。

访问控制：

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 中完全匹配。例如，您可能不关心 HTML 中的“ProblemJson”FormGroup，但您必须声明它。那是我的问题，至少。

于 2017-08-04T03:10:56.367 回答