نکته تکمیلی
برای این منظور متد findFieldControl را به شکل زیر پیاده سازی خواهیم کرد:
متد get استفاده شده در بدنه متد، امکان دریافت path متناظر با یک کنترل را نیز دارد؛ از این جهت صرفا لازم بود کلید دریافتی از سمت سرور را به شکل زیر تبدیل کنیم:
و در نهایت اعمال تغییرات به متد processModelStateErrors به شکل زیر میباشد:
با کمی تغییرات در بدنه متد processModelStateErrors، میتوان برای سناریوهای master-detail که خطاهایی به شکل زیر از سمت سرور دریافت میشود نیز پیغام متناظر به کنترلهای موجود در FormArrayها را نیز به درستی نمایش داد:
{ 'detail[0].title':['message'], 'detail[0].detail[0].title':['message'] }
private findFieldControl(fieldName: string): AbstractControl { const path = fieldName.replace('[', '.').replace(']', ''); return ( this.form.get(path) || this.form.get(this.lowerCaseFirstLetter(path)) ); }
'detail.0.title' 'detail.0.detail.0.title'
protected handleSubmitError(response: HttpErrorResponse) { this.messages = []; if (response.status === 400) { // handle validation errors const validationDictionary = response.error; for (const fieldName in validationDictionary) { if (validationDictionary.hasOwnProperty(fieldName)) { const messages = validationDictionary[fieldName]; const control = this.findFieldControl(fieldName); if (control) { // integrate into angular's validation if we have field validation control.setErrors({ model: { messages: messages } }); } else { // if we have cross field validation, then show the validation error at the top of the screen this.messages.push(...messages); } } } } else { this.messages.push('something went wrong!'); } }