Question

我如何以角度向我的 FormArray 添加项目？

2021-01-09

994

angular angular-reactive-forms formarray

我尝试将一些项目添加到我的 FormArray 中，但总是得到： core.js:6241 ERROR TypeError: 无法读取 null 的属性“push”。

我可以使用我的 get answersFormArray() 将项目添加到测试数组，但我无法将其添加到 letter 和 text 表单数组中。我尝试调用 letterFormArray.push(value here) ，但给出了相同的错误。

       this.userForm = this.fb.group({
      fname: ['', [Validators.required]],
      lname: ['', [Validators.required]],
      email: ['', [Validators.email, Validators.required]],
      facility: ['', [Validators.required]],
      testCode: ['', [Validators.required]],
      date: [''],
      test: this.fb.group({
        name: [''],
        id: [''],
        position: [''],
        scored: [''],
        wrong: [''],
        duration: [''],
/*         answers: this.fb.array([
          this.fb.group({
            num:'',
            letter: this.fb.array([]),
            text: this.fb.array([]),
            userLetter: this.fb.array([]),
            userText: this.fb.array([]),
          })
        ])
      }), */
        answers: this.fb.group({
          user: this.fb.array([
            this.fb.group({
              num:'',
              letter: this.fb.array([]),
              text: this.fb.array([]),
            })
          ]),
          teste: this.fb.array([
            this.fb.group({
              num:'',
              letter: this.fb.array([]),
              text: this.fb.array([]),
            })])
        })
      })
    })

我尝试将项目添加到 letter 和 text FormArray。


  get answersFormArray() {
    //return this.userForm.get('test.answers') as FormArray //Option 1
    return this.userForm.get('test.answers.teste') as FormArray
  }

  get letterFormArray() {
    return this.userForm.get('test.answers.teste.letter') as FormArray;
  }
  get textFormArray() {
    return this.userForm.get('test.answers.teste.text') as FormArray;
  }


getTestCorrectAnswers() {
    for(let i = 0; i < this.current_quest.length; i++) {
      const answ = this.fb.group({
        numb: i+1,
        letter: this.fb.array([]),
        text: this.fb.array([])
      })
      for(let z = 0; z < this.current_quest[i].alternatives.length; z++) {
      const alter = this.fb.control("");
        //objective
        if(this.current_quest[i].type === "objective") {
          if(this.current_quest[i].single_or_multi === "single") {
            if(this.current_quest[i].alternatives[z].correct == true) {
              this.textFormArray.push(this.fb.control(this.current_quest[i].alternatives[z].text));
              this.letterFormArray.push(this.fb.control(this.current_quest[i].alternatives[z].letter));
              console.log("Objetiva com uma única alternativa --> " + this.current_quest[i].alternatives[z].text);
            }
          }
          else {
            if(this.current_quest[i].alternatives[z].correct == true) {
              
              console.log("Objetiva com várias alternativas --> " + this.current_quest[i].alternatives[z].text);
            }
          }

        }
        //Subjective
        else {
          if(this.current_quest[i].alternatives.length >= 1) {
            console.log("Subjetiva com chave de resposta --> " + this.current_quest[i].alternatives[z].text);
          }
          else if(!this.current_quest[i].alternatives.length){
            console.log("Subjetiva sem chave de resposta --> ");
          }
        }
        
      }
      this.answersFormArray.push(answ);
    }
  }

这是我正在创建的对象的一个示例...

teste: [
        {
          "numb": 1,
          "letter": ["a", "b"],
          "text": ["red", "yellow"]
        },
        {
          "numb": 2,
          "letter": ["a"],
          "text": ["black"]
        }
]

Answer 1

letter 和 text 是嵌套在另一个 FormArray 中的 FormArray。由于 FormArray 基本上是一个数组，因此您需要定位填充到其中的 FromGroup 的索引。

get letterFormArray(index: number) {
    return this.userForm.get('test.answers.teste[index].letter') as FormArray;
  }

Answer 2

André，你通常有

get users()
{
  return this.userForm.get('test.answer.users') as FormArray
}
get teste()
{
  return this.userForm.get('test.answer.teste') as FormArray
}

要到达 FormArray 的元素，你需要一个“索引”，并且你不能使用 getter，请参见 getLetter 一起，而不是 get Letter，另请参阅我们如何使用之前定义的 getter

getLetter(index){
    return this.answer.at(index).letter as FormArray
}
getTest(index){
    return this.answer.at(index).test as FormArray
}

现在你可以做

  this.getLetter(index.push(...);
  //and
  this.getTest(index.push(...);