javascript - 表单不显示在 Angular 中

Question

我正在尝试对问题进行调查并添加问题选择。

我的表单显示问题但不显示选择部分

我有一个survey.components.ts：

export class HomeComponent implements OnInit, OnChanges {

    survey: FormGroup;
    questionnaires: FormArray;

    results = {
        success: "",
        error: ""
    }

    constructor(private fb: FormBuilder) {}

    ngOnInit() {
        this.survey = this.fb.group({
            name: ['My Quick Survey', Validators.required],
            questionnaires: this.fb.array([new FormGroup({
                question: new FormControl(['Ready for a quick survey?']),
                multi: new FormControl('true'),
                choices: this.fb.array([new FormGroup({
                    text: new FormControl('Yes'),
                    text1: new FormControl('No')
                })])
            })])
        });

        this.questionnaires = this.survey.get('questionnaires') as FormArray;
    }

    ngOnChanges() {
        this.survey.controls['questionnaires'].valueChanges.subscribe(value => {});
    }


    addchoice(i) {
        console.log(i, 'id added')
        this.survey[i].choices.push({
            text: "New Choice"
        })
    }

    removechoice(index) {
        console.log(index, 'id deleted')
        this.questionnaires.removeAt(index);
    }

    createQuestion(): FormGroup {
        return this.fb.group({
            question: ['Next question?', [Validators.required]],
            multi: [true, [Validators.required]],
            choices: this.fb.array([new FormGroup({
                text: new FormControl('Yes'),
                text1: new FormControl('No')
            })])
        });

    }

    addquestion() {
        this.questionnaires.push(this.createQuestion());
    }

    onSubmit(form: FormGroup) {}

}

然后我使用 HTML 来做表单。

问题部分显示但选择部分有错误

问题对我说：无法读取未定义的属性“控件”

所以这里是survey.component.html的一部分：

// this part is display
<div class="input-field col s12" formArrayName="questionnaires">
  <div
    *ngFor="let q of survey.controls.questionnaires.controls; index as i"
    [formGroupName]="i"
  >
    <div>
      <label for="answer">Question {{(i+1)}}</label>
      <div>
        <input type="text" formControlName="question" />
        <span class="input-group-addon">
          <!--  <input type="checkbox" formControlName="multi">  {{ survey.questionnaires[i].multi?'Multiple':'Single'  }} Choice -->
        </span>
      </div>
    </div>

    // I've got a problem here, this part is not displayed

    <div class="request" formArrayName="choices">
      <div
        class="form-group"
        *ngFor="let c of survey.controls.questionnaires.controls.choices.controls[i].controls[i].controls; index as i"
        [formGroupName]="i"
      >
        <label for="answer">Choice {{(index+1)}}</label>
        <input *ngIf="index > 2" type="text" formControlName="text" />
        <div else class="input-group">
          <input type="text" formArrayName="c[i].controls.text1" />
          <span class="input-group-btn">
            <button
              type="button"
              (click)="removechoice(i,index)"
              class="btn btn-danger"
            >
              <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
            </button>
          </span>
        </div>
      </div>
    </div>
  </div>
  <div></div>
</div>

如果这对您有帮助，这是我的迭代：

如果你能向我解释如何解决它

谢谢

标签： javascriptangulartypescript

Answer 1

由于选择是调查问卷的子项，因此您必须将选择 formArray 移动到 formArrayName div

更改您的代码如下：

  <div>
      <label for="answer">Question {{(j+1)}}</label>
      <div>
        <input type="text" formControlName="question" />
        <span class="input-group-addon">
        </span>
      </div>
    <div class="request" formArrayName="choices">
      <div
        class="form-group"
        *ngFor="let c of $any(q).get('choices').controls; index as x"
        [formGroupName]="x"
      >
        <label for="answer">Choice {{(x+1)}}</label>
        <input *ngIf="x > 2" type="text" formControlName="text" />
        <div else class="input-group">
          <input type="text" formArrayName="text" />
          <span class="input-group-btn">
            <button
              type="button"
              (click)="removechoice(x)"
              class="btn btn-danger"
            >
              <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
            </button>
          </span>
        </div>
      </div>
    </div> 
    </div>

例子