Как правильно работать с валидацией формы?

Question

[historydev]

В документации angular приведён такой пример:

<input type="text" id="name" class="form-control"
      formControlName="name" required>

<div *ngIf="name.invalid && (name.dirty || name.touched)"
    class="alert alert-danger">

  <div *ngIf="name.errors?.['required']">
    Name is required.
  </div>
  <div *ngIf="name.errors?.['minlength']">
    Name must be at least 4 characters long.
  </div>
  <div *ngIf="name.errors?.['forbiddenName']">
    Name cannot be Bob.
  </div>
</div>

Допустим у нас 10 полей, копипастить на каждое новое поле вообще не решение.

Сейчас я пишу какой-то костыль свой по ключам объекта form.controls пробегаюсь, потом прокидываю имя в метод который получает нужный элемент и уже там делаю все сравнения:

<div class="validation" *ngFor="let name of form.controls | keyvalue">
			<div *ngIf="form_field(name.key)?.errors?.['required'] && check_field(form_field(name.key))">
				{{ name.key }} is required.
			</div>
		</div>

public check_field(field: AbstractControl<any, any> | null) {
		return field?.invalid && (field?.dirty || field?.touched);
	}

	public form_field(name: string) {
		return this._form.get(name);
	}

По моему я просто пишу говно код, подскажите как это сделать правильно?

Answer 1

[Антон Швец]

Сделать компонент-обертку или директиву, которая будет получать NgControl, слушать его, получать ошибки и рендерить.
Ну например так https://stackblitz.com/edit/angular-ivy-yiy8tv?fil...
Вместо ngIf можно прикрутить динамический рендеринг.

Вот статья есть https://netbasal.com/make-your-angular-forms-error...

Comments

[historydev]

Я сделал вот так:

<div class="input_box reg_item" *ngIf="!form_type">
				<input
					type="text"
					name="first_name"
					placeholder="Имя"
					formControlName="first_name"
				/>
				<div class="validation" *ngIf="validate('first_name').length">
					<fa-icon [icon]="icons.faCircleExclamation" class="error"></fa-icon>
					<div class="description">
						<div class="item" *ngFor="let item of validate('first_name')">
							{{ item }}
						</div>
						<div class="rect"></div>
					</div>
				</div>
			</div>

public validate(name: string): any[] {
		const field = this.form_field(name);
		if(field && field.invalid && (field.dirty || field.touched) && field.errors) {
			const arr = Object.keys(field.errors).map(error => {
				switch (error) {
					case 'required': return 'Заполните поле.';
					case 'minlength': return 'Минимальное количество символов ' + field.errors?.[error]['requiredLength'];
					case 'maxlength': return 'Максимальное количество символов ' + field.errors?.[error]['requiredLength'];
					case 'email': return 'Некорректный адрес';
					default: return null;
				}
			});

			return arr.every(el => el) && arr || [];
		}
		return [];
	}