Требуется выбор коврика не может быть сброшено

Question

Каждая группа FormGroup, использующая выбор матов в качестве единственного обязательного поля, не может быть сброшена с помощью FormGroup.reset (), поскольку валидаторы не сбрасываются

https://stackblitz.com/edit/material7-template-matselect-required?file=src%2Fapp%2Fapp.component.html

при отправке первого поляпусто и помечено как ошибка ...

Единственное решение, которое сработало для меня, это использовать ngIf для регенерации формы, но это не очень хорошо для пользователя, который видит пустой html на секунду ...

Любое другое решение?

Спасибо!

Answer 1

Поскольку уже есть принятый ответ, я могу предложить менее добавленные строки там.

Это немного известная ошибка Material, в качестве обходного пути вы можете добавить ElementReference к вашему тегу form #f="ngForm":

<form [formGroup]="quickFileForm" (ngSubmit)="saveQuickFileForm()" #f="ngForm">

Затем добавьте@ViewChild декоратор для вашей части TS, который ссылается на тег в вашей форме:

import { Component, ViewChild } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  group = new FormGroup({
    select: new FormControl(null, Validators.required),
    input: new FormControl()
  });

  @ViewChild('f') myForm;

   ....
   ....
}

Не забудьте импортировать его из @angular/core выше.Затем просто добавьте:

this.myForm.resetForm();

к вашему методу:

submit() {
    if(this.group.valid) {
      const obj = new MyObj();
      Object.assign(obj, this.group.value);

      this.survey.push(obj);
      this.myForm.resetForm(); // <-- Here you add it.
      return;
    }

    alert('not valid, try again')
  }

Answer 2

Используйте SetValidators, чтобы сделать валидаторы обязательными для nullvalidator

  this.group.controls['select'].setValidators([Validators.nullValidator])
  this.group.controls['select'].updateValueAndValidity();