Как правильно обрабатывать ошибки для пользовательского сообщения?
Я пишу функцию, которая проверяет ошибки, а затем использую ngIf для отображения (или нет) пользовательского текста. Сюда:
// ts
handleError = (controlName: string, errorName: string) => {
return this.form.controls[controlName].hasError(errorName);
}
// html
<mat-error *ngIf = "handleError('tipo', 'required')">Campo obbligatorio</mat-error>
Это хорошо работает для "одноуровневой" группы форм. А как насчет группы вложенных форм? Такие как:
this.form = this.fb.group({
field1: [data.field1, [Validators.required]],
myObj: this.fb.group({
field2: [data.myObj.field2, [Validators.required]],
})
});
Здесь он кажется аварийным (говоря Не удается прочитать свойства неопределенного (чтение «hasError») на консоли).
Каков наилучший подход к повторению любой вложенной группы форм и проверке на наличие ошибок?
Ответы 1
Используйте метод получить для извлечения элемента управления, чтобы вы могли передать значение с разделителями точками для доступа к вложенному элементу управления формой.
компонент.ts
handleError = (controlName: string, errorName: string) => {
return this.form.get(controlName).hasError(errorName);
}
компонент.html
<mat-error *ngIf = "handleError('myObj.field2', 'required')">Campo obbligatorio</mat-error>
Вы также можете получить доступ к FormArray ['formGroupKey', ArrayIndex,] ==> handleError (['myObj', 0], 'required') что-то вроде
Вы используете строку с разделителями точками или документацию по проверке массива: angular.io/api/forms/AbstractControl#get
Попробовал ваше предложение: <mat-error *ngIf = "handleError('ingredienti.[farine,itemIndex].quantita', 'required')">Campo obbligatorio</mat-error> но это ошибка
какую ошибку вы получаете?
он говорит: «ОШИБКА TypeError: невозможно прочитать свойства null (чтение« hasError »)»
Это означает, что вы можете передать неправильный аргумент, можете ли вы создать небольшой stackbkitz>
Я следую вашему предложению. Вот функция: handleError = (controlName: string, errorName: string) => { return this.form.get(controlName).hasError(errorName); }
Я сделал пример, пожалуйста, проверьте: stackblitz.com/edit/angular-ivy-a1bxoa?file=src/app/…
Я добавил еще один уровень, что касается «ингредиенти», из вашего примера: stackblitz.com/edit/angular-ivy-ffltbg?file=src/app/… . кажется, выдает ту же самую ошибку...
При использовании массива вы должны передавать каждый уровень в виде отдельной строки примерно так: console.info(this.handleError(['anotherLevel','arr', 0], 'required'));
Да, но я нахожусь в компоненте на html-странице. Он вложен на других уровнях, поэтому мне нужно пройти весь путь; иначе как мне поймать элемент? относится к моему предыдущему коду: <mat-error *ngIf = "handleError('anotherLevel.[farine,itemIndex].name', 'required')">Campo obbligatorio</mat-error>
Разве вы не можете передать каждой группе форм/ключу управления что-то вроде ['anotherLevel','farine',itemIndex,'name']?
Сюда? <mat-error *ngIf = "handleError('[anotherLevel,farine,itemIndex.name]', 'required')">Campo obbligatorio</mat-error>? У меня такая же ошибка...
На самом деле вы передаете массив строк, это должен быть массив внутри строки или числа handleError(['anotherLevel','farine',itemIndex.name]', 'required')"
Теперь так: handleError(['anotherLevel','farine',itemIndex,'quantita'], 'required')" он говорит "core.mjs:6485 ERROR Код ошибки: undefined Сообщение: Преобразование циклической структуры в JSON"
Пожалуйста, создайте stackblitz.
Не очень хорош в stackblitz. Вот моя попытка с моим кодом: stackblitz.com/edit/angular-ivy-n1xuir?file=src/app/… (даже если он делает ошибки, не знаю почему, но я думаю, что это не связано с моим кодом?)
Я понимаю. Я думаю, что это больше связано с тем, как я добавляю новый элемент формы. Что касается этого вопроса: stackoverflow.com/questions/71537428/…. Может быть, это неправильный путь? Я принял этот ответ как «Правильный». Можете помочь с другим вопросом?
Конечно. Я сделаю все возможное.
Что делать, если я нахожусь в FormArray? Что дискриминировать по индексу? Не могу сделать myObj.item[x].field :(