Добавление валидаторов для существующей группы форм - PullRequest
Новая
       3

Добавление валидаторов для существующей группы форм

0 голосов
/ 24 февраля 2020

У меня есть форма с одним текущим полем description, и я строю эту форму из модели, как показано ниже

view-model.ts 

export class ViewModel {
  description = '';
}

view-action.component.ts 

export class ViewActionComponent {
  constructor(public fb: FormBuilder) {
    this.groupForm = this.fb.group(new ViewModel());
  }
...
}

Форма отлично работает. Теперь проблема в том, что мне нужно добавить валидатор для этого поля описания (например, ввод только текста). Есть ли способ добавить валидатор для описания в view-model.ts файле, чтобы я не мог изменить view-action.component.ts файл?

Итак, основная идея c такова: если мне нужно добавить еще одно поле с валидатором, Я могу сделать это в самой ViewModel.

1 Ответ

2 голосов
/ 24 февраля 2020

Итак, ваша проблема в том, что вы хотите создать форму, используя класс view-model.ts.

Проблема с созданием формы путем передачи объекта:

this.fb.group(new ViewModel())

Этот построитель форм использует только состояние в этом объекте для создания значений формы. Это не набор инструкций о том, как построить более сложную форму с проверкой. Вам нужно создавать сложные формы, взаимодействуя со сборщиком форм для каждого элемента управления.

Для этого вы можете позволить своей модели представления построить форму: 

export class ViewModel {
  description = '';

  private form: FormGroup;

  createForm(formBuilder: FormBuilder): FormGroup {
    this.form = formBuilder.group({
      description: formBuilder.control(this.description, {
        validators: [
          Validators.required
        ]
      })
    });
    return this.form;
  }

  update() {
    this.description = this.form.get('description').value;
  }
}

Так что теперь ваш компонент просто получает форма выглядит следующим образом: 

this.groupForm = this.viewModel.createForm(this.fb);

И при отправке ваш компонент сообщает вашей модели представления, что он может обновить себя из формы. 

onSubmit() {
  this.viewModel.update();
}

DEMO: https://stackblitz.com/edit/angular-tm8abx

...