Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.01.2019, 14:00
Интересующийся
Отправить личное сообщение для kotelok Посмотреть профиль Найти все сообщения от kotelok
 
Регистрация: 27.08.2018
Сообщений: 19

Короткий синтаксис обращения к контролу из шаблона
<form [formGroup]="companyDetailsForm">
  <div class="form-group">
    <input ....>
    <i *ngIf="companyDetailsForm.controls.selectedCompanyRaw.errors != null &&
              companyDetailsForm.controls.selectedCompanyRaw.errors.empty">* текст empty-ошибки</i>

Когда пользователь нажимает сохранение формы, в коде идёт обращение к API для валидации данных. Если сервис вернул ошибку, то выполняется:
this.companyDetailsForm.controls["selectedCompanyRaw"].setErrors({ 'empty': true });
В итоге на форме под полем появляется текст ошибки. Т.е. работает как и ожидается.

Но есть пара вопросов:
1. Возможно ли как-то сократить текст условия 'ngIf'? Если пробую использовать неполное имя контрола, т.е. без 'companyDetailsForm.controls.', то код просто не находит сам контрол. А если убираю первую проверку на 'errors != null', то второе условие генерирует ошибку, что не может прочитать свойство 'empty' у 'null'. А шарповский оператор '?.' тут не рализован. Как-то очень громоздко получается.
2. Как реализовать сокрытие текста ошибки как только пользователь зафокусился в поле? Или как только начал что-нибудь вводить. Т.е. не в момент следующей валидации по субмиту, а именно по факту активности пользователя в поле безотносительно какой-либо валидации очистить 'errors'.
Ответить с цитированием
  #2 (permalink)  
Старый 16.01.2019, 14:24
Интересующийся
Отправить личное сообщение для kotelok Посмотреть профиль Найти все сообщения от kotelok
 
Регистрация: 27.08.2018
Сообщений: 19

При том, что в официальной документации используется именно короткий синтаксис:
<form [formGroup]="form" (ngSubmit)="onSubmit()">
      <div *ngIf="first.invalid"> Name is too short. </div>
https://angular.io/api/forms/FormControlName

Т.е. они опускают "form.controls." и всё работает.
Ответить с цитированием
  #3 (permalink)  
Старый 16.01.2019, 18:19
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,151

1. У них в контроллере прописан геттер для контрола, вы собственно также можете сделать. Еще ошибку можно проверять через hasError метод.
2. https://stackoverflow.com/questions/...ove-error?rq=1
Ответить с цитированием
  #4 (permalink)  
Старый 17.01.2019, 13:19
Интересующийся
Отправить личное сообщение для kotelok Посмотреть профиль Найти все сообщения от kotelok
 
Регистрация: 27.08.2018
Сообщений: 19

Да, спасибо, не заметил по невнимательности.

Ещё вопрос - можно как-то сократить вот эту запись?
..
  var errorInfo = {};
  errorInfo[kppValidation.resultCode.toLowerCase()] = true;
  this.companyDetailsForm.controls["kpp"].setErrors(errorInfo);
..

Т.е. как-нибудь в одну строку и без временной переменной.
В примерах из документации это выглядит так:
..
  this.companyDetailsForm.controls["kpp"].setErrors({ "required": true });
..
Но в такой нотации на место константы 'required' синтаксис не позволяет поставить получение значения из свойства с вызовом метода.

Последний раз редактировалось kotelok, 17.01.2019 в 14:12.
Ответить с цитированием
  #5 (permalink)  
Старый 17.01.2019, 18:33
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,151

this.companyDetailsForm.controls["kpp"].setErrors({ [kppValidation.resultCode.toLowerCase()]: true });
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск