У меня есть реактивная форма в Angular, как показано ниже:
this.AddCustomerForm = this.formBuilder.group({
Firstname: ['', Validators.required],
Lastname: ['', Validators.required],
Email: ['', Validators.required, Validators.pattern(this.EMAIL_REGEX)],
Picture: [''],
Username: ['', Validators.required],
Password: ['', Validators.required],
Address: ['', Validators.required],
Postcode: ['', Validators.required],
City: ['', Validators.required],
Country: ['', Validators.required]
});
createCustomer(currentCustomer: Customer)
{
if (!this.AddCustomerForm.valid)
{
//some app logic
}
}
this.AddCustomerForm.valid возвращает false, но все выглядит хорошо.
Я попытался найти, проверив свойство статуса в коллекции элементов управления. Но мне интересно, есть ли способ найти недопустимые и отобразить их пользователю?
Ответы:
Вы можете просто перебрать каждый элемент управления и проверить статус:
источник
findInvalidControls()
вам возвращается?Я только что столкнулся с этой проблемой: все поля формы действительны, но сама форма недействительна.
Оказывается, я установил Validator.required в FormArray, где элементы управления добавляются / удаляются динамически. Таким образом, даже если FormArray был пуст, он все равно был необходим, и поэтому форма всегда была недействительной, даже если все видимые элементы управления были правильно заполнены.
Я не нашел недопустимую часть формы, потому что моя функция findInvalidControls проверяла только FormControl, а не FormGroup / FormArray. Поэтому я немного обновил его:
источник
В разделе DevTools в Chrome выберите вкладку Консоль.
В командной строке введите команду:
Результат должен быть похож на этот:
В этом случае подчеркнутый текст предназначен для элемента управления формы
listen-address
. И текст в кружке:.ng-invalid
указывает, что элемент управления недействителен.источник
И формы, и все ваши элементы управления расширяют угловой класс AbstractControl. Каждая реализация имеет средство доступа к ошибкам проверки.
Документы api содержат все ссылки https://angular.io/api/forms/AbstractControl
редактировать
Я думал, что средство доступа к ошибкам работает таким образом, однако эта ссылка на github показывает, что есть другие люди, которые думали так же, как и я https://github.com/angular/angular/issues/11530
В любом случае, используя аксессор элементов управления, вы можете перебирать все элементы formControl в вашей форме.
источник
Теперь в angular 9 вы можете использовать метод markAllAsTouched () для отображения валидаторов недопустимых элементов управления:
источник
Если у вас не так много полей в форме, вы можете просто F12 и навести курсор на элемент управления, вы увидите всплывающее окно с нетронутыми / затронутыми / допустимыми значениями поля - "# fieldname.form-control.ng- untouched.ng-invalid ".
источник
Я думаю, вам следует попробовать использовать
this.form.updateValueAndValidity()
или попробовать выполнить тот же метод в каждом из элементов управления.источник
попробуй это
источник
Это будет регистрировать все имена элементов управления 😊
for (let el in this.ReactiveForm.controls) { if (this.ReactiveForm.controls[el].errors) { console.log(el) } }
вы можете сделать из этого массив или строку и отобразить для пользователя
источник
Я взял на себя смелость улучшить код AngularInDepth.com -s, чтобы он также рекурсивно искал недопустимые входные данные во вложенных формах. Будет ли он вложен в FormArray-s или FormGroup-s. Просто введите formGroup верхнего уровня, и она вернет все недопустимые элементы FormControl.
Вы можете пропустить некоторые проверки типа "instanceof", если вы разделите проверку FormControl и добавление недопустимых функций массива в отдельную функцию. Это сделало бы функцию намного чище, но мне нужна была глобальная единственная функция, опция, чтобы получить плоский массив всех недопустимых formControls, и это решение!
Только для тех, кому это нужно, чтобы им не приходилось его кодировать самостоятельно.
Редактировать # 1
Было запрошено, чтобы он также возвращал недопустимые FormArray-s и FormGroups, поэтому, если вам это тоже нужно, используйте этот код
источник
вы можете зарегистрировать значение формы
console.log(this.addCustomerForm.value)
, оно будет консолью для всех значений элемента управления, тогда пустые поля или "" (пустые) поля указывают на недопустимые элементы управленияисточник