角動態表單 - 帶多部分問題的表單不支持驗證

Question

使用Angular提供的動態表單示例（https://angular.io/guide/dynamic-form）&現場示例（https://angular.io/generated/live-examples/dynamic-form/eplnkr.html）我試圖創建一個包含多部分答案的動態表單。

我在這裏創建了一個實例（https://plnkr.co/edit/KDG7KCC2Bsi9LLXiIGct?p=preview）。我遇到的問題是我不明白如何將提供的驗證方法更改爲將通過其唯一鍵查看問題並返回正確錯誤的內容。示例方法使用此html <div class="errorMessage" *ngIf="!isValid">{{question.label}} is required</div>和這在組件isValid() { return this.form.controls[this.question.key].valid; }

在這個例子中，我想設置字段的最大長度爲4，但我想使用反應形式驗證。此外，我想使用自定義驗證，如爲數字字段設置最小值和最大值。所以當需要驗證時，它正確顯示在正確的字段下。

這是我的questions-control.service.ts的樣子。我認爲這是問題的一部分，因爲提供的驗證代碼沒有考慮對一個問題的答案數組進行迭代。

questions.forEach(question => { 
    for (var key in question.responses) { 
    group[question.responses[key].key] = new FormControl(
     question.responses[key].response || '' 
    );   
    } 
}); 

任何幫助，將不勝感激。

Answer 1

您可以很容易地實現這一點。在你的項目導入此https://www.npmjs.com/package/ng2-validation NPM包，然後添加此import { CustomValidators } from 'ng2-validation';在app.module.ts

然後，你需要去的問題，control.service.ts和修改該功能

toFormGroup(questions: QuestionBase<any>[]) 
     let group: any = {}; 
      questions.forEach(question => { 
       group[question.key] = question.required ? new FormControl(question.value || '', [Validators.required, CustomValidators.min(10)]): new FormControl(question.value || '');    
      }); 
      return new FormGroup(group); 
      }