Reactive Form Validators.Required 在 formControls 上不起作用

Question

这是我在 app.component.html 中循环的模拟数据数组

questions: [
{question: 'Question-1'},
{question: 'Question-2'},
{{question: 'Question-3'}
]

在我的 app.component.ts 中，如下所示，由于我使用的是响应式表单方法，我已经实例化了表单组并声明了一个名为“note”的 formControl，它是按要求声明的：

导出类示例 {

regPresentationForm: FormGroup;

this.regPresentationForm = new FormGroup ({
   note: new FormControl(null, Validators.required),
});

}

在我的 HTML 组件中，我循环遍历数组并显示文本字段，因此将有三个文本框，每个文本框都有 note 作为我的 formControl：

<ng-container *ngFor = "let question of questions">
  <textarea type="text" id="textArea" placeholder="Enter the Note" class="form-control" formControlName = "note">
  </textarea>
</ng-container>

由于需要注释表单控件，因此我将禁用提交按钮，如下所示：

<button class="btn btn-primary" type="submit"[disabled] =  "!regPresentationForm.valid">
  Save & Continue
</button>

问题：

问题是，如果我在第一个文本框中输入文本，表单会变得有效，因此 Angular 将其视为重复三次的单个框，这不应该发生，它应该单独考虑每个注释字段（注释 formcontrol 的 3 个实例，因为迭代完成三次）

不知道如何解决这个需要帮助。

我希望我很清楚。

Answer 1

您可以像这样循环 formControl： 在 ts 方面：

 form2: FormGroup;
 testData:any;
 formDataInfo: any;


  constructor() {  }

 ngOnInit() {
    this.testData = [];
    this.formDataInfo = {}; 

   for(var i=0; i<2; i++){
    var currentNote = 'note' + i;

    this.formDataInfo[currentNote] = new FormControl(null, 
    Validators.required);

    this.testData.push({ "value": currentNote, "key": "firstName1", 
      "label": "First name",
      "required": true, "order": 1, "controlType": "textbox", 
      "type": "text" 
    }); 

  }
  this.form2 = new FormGroup (
    this.formDataInfo
  );
}

在 HTML 方面：

<div [formGroup]="form2">
  <ng-container *ngFor="let question of testData" class="form-row">
    {{question | json}} {{question.key}}
        <textarea type="text" placeholder="Enter the Note"    
          class="form-control" [formControlName]="question.value" 
          [required]="question.required"> 
        </textarea> 
    </ng-container>
</div>