Question

这是我在app.component.html

中循环的模拟数据数组

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

在我的app.component.ts中，如下所示，因为我使用了被动表单方法，所以我已经实例化了表单组并声明了一个名为＆＃39; note＆＃39;根据需要声明：

导出类示例{

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>

由于需要注释formcontrol，我正在禁用这样的提交按钮：

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

问题：

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

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

我希望我很清楚。

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>

Reactive Form Validators。要求在formControls上不起作用

1 个答案: