Angular Reactive Forms, formName.reset () работает, но выдает ошибку 'control.value is null' и все поля помечены как 'красные' и недействительны?

Question

У меня есть угловая реактивная форма, и при отправке у меня есть этот код:

(ngSubmit)="addVideo(); addVidForm.reset();"

Я отмечаю свою основную форму #addVidForm

У меня также есть несколько пользовательских валидаторов / элементов управления, которые являются особенными по сравнению с другой формой, которая у меня есть, где это не происходит при сбросе формы.

Мой валидатор выглядит следующим образом:

 static mustBeVimeo(control: AbstractControl) : ValidationErrors | null {

        if((control.value as string).startsWith("https://vimeo.com/")){ return null } else
        if((control.value as string).startsWith("http://vimeo.com/")){ return null }
        else { return { mustBeVimeo : true } }

}

Это моя форма на сервере:

this.addVideoForm = new FormGroup({
      title: new FormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(50)]),
      description: new FormControl('', [Validators.required, Validators.minLength(5), Validators.maxLength(200)]),
      category: new FormControl('', [Validators.required]),
      link: new FormControl('', [Validators.required, AddVideoValidators.mustBeVimeo, Validators.maxLength(100)]),
      visibleToGuests: new FormControl(this.visibleToGuests, [Validators.required])
    })

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

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

Answer 1

Найден другой поток переполнения стека, в котором в комментариях описано, что на самом деле делает функция form.reset (), которая устанавливает все значения в нули вместо их начальных значений.

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

  resetForm() {
    this.addVideoForm = new FormGroup({
      title: new FormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(50)]),
      description: new FormControl('', [Validators.required, Validators.minLength(5), Validators.maxLength(200)]),
      category: new FormControl('', [Validators.required]),
      link: new FormControl('', [Validators.required, AddVideoValidators.mustBeVimeo, Validators.maxLength(100)]),
      visibleToGuests: new FormControl(this.visibleToGuests, [Validators.required])
    })
  }

Answer 2

Для реактивной формы вам нужно использовать атрибут [formGroup] Binding. Он предоставляет метод reset () public.

Шаблон:

<form [formGroup]="registerForm">
.....
</form>

Компонент:

this.registerForm.reset();
this.registerForm.markAsPristine();
this.registerForm.markAsUntouched();

Вы также можете передавать Пустые значения в Значения формы.

this.registerForm.reset(this.registerForm.value);

Answer 3

Создайте ссылку на элемент вашей формы в вашем классе следующим образом.

@ViewChild('formRef') formRef;
form: FormGroup;

В конструкторе класса компонента создайте свою форму

constructor() {
  this.form = new FormGroup({
    formControl1: new FormControl()
    // etc...
  })
}

Затем добавьте #formRef к тегу формы шаблонов. Обратите внимание, чтобы оставить существующие директивы, как они есть.

<form #formRef="ngForm"></form>

Сброс формы теперь так же прост, как и

this.form.reset(); // Clears the Angular FormGroup without clearing validators.
this.formRef.resetForm(); // Clears the DOM form with validators

Отправка формы теперь приводит к очищенной форме без ошибок проверки.