Угловая форма отправки должна быть отключена, но при нажатии все равно будет отображаться ошибка

Question

Мое намерение - создать форму на Angular.Кнопка отправки должна быть отключена до тех пор, пока! F.valid (форма недействительна).Как только пользователь нажмет кнопку, цвет фона всех недопустимых входных данных изменится.Кроме того, под формой должно отображаться предупреждение.

До сих пор я также пытался вручную отключить кнопку в машинописи и изменить цвет фона с помощью [class.myClass] = "! F.valid" -но это меняет цвет фона с самого начала, так как форма еще не была затронута и, следовательно, все еще недействительна.

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

Моя HTML-форма:

<form class="w-50 mb-5 mt-5" (ngSubmit)="onSubmit(f)" #f="ngForm">
      <div class="form-group">
        <div class="form-row">
          <div class="col">
            <input type="text" name="name" class="form-control" placeholder="Name" ngModel required>
          </div>
          <div class="col">
            <input type="text" name="lastname" class="form-control" placeholder="Future Family Name" ngModel required>
          </div>
        </div>
      </div>
      <div class="form-group">
        <input type="email" name="email" class="form-control" placeholder="E-Mail" ngModel email required>
      </div>
      <div class="form-group">
        <input type="text" name="package" placeholder="Please choose a package from the selection above!" class="form-control" [(ngModel)]="selectedPackage" required readonly>
      </div>
      <div class="form-group">
        <input type="date" name="date" placeholder="When is your wedding?" class="form-control" ngModel required>
      </div>
      <div class="form-group">
        <textarea class="form-control" name="text" rows="4" placeholder="Your message.." ngModel></textarea>
      </div>
      <div class="w-100 d-flex justify-content-center">
        <div class="row">
          <div class="col-12 text-center">
            <span class="alert-info-display-none">Please fill in the required fields above.</span>
          </div>
          <div class="col-12 text-center mt-2" (click)="check(f)">
            <button type="submit" [disabled]="!f.valid">Send</button>
          </div>
        </div>
      </div>
    </form>

Не поможет, но в любом случае;Машинопись:

@Input() selectedDiv: number;
  selectedPackage: string;

  onSubmit(form: NgForm): void {
    console.log(form);
  }

  changePackageInfo(): void {
    if (this.selectedDiv === 0) {
      this.selectedPackage = '';
    }
    if (this.selectedDiv === 1) {
      this.selectedPackage = 'You\'ve chosen Package One';
    }
    if (this.selectedDiv === 2) {
      this.selectedPackage = 'You\'ve chosen Package Two';
    }
    if (this.selectedDiv === 3) {
      this.selectedPackage = 'You\'ve chosen Package Three';
    }
  }

  public ngOnChanges(changes) {
    if ('selectedDiv' in changes) {
      this.changePackageInfo();
      }
    }

  constructor() { }

  ngOnInit() {
    this.changePackageInfo();
  }

Answer 1

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

В компоненте:

  onSubmit(form: NgForm) {
    this.showError = form.invalid;
    if(form.invalid) return;
    // continue submission logic here.
  }

Использование соответствующего шаблона

<div>
    <label for="email">
    <span style="color:red;font-weight:bold;">*</span>
      Email
    </label>
    <input 
        id="email" name="email" [(ngModel)]="emailText" 
        required #email="ngModel"
        [ngStyle]="{'background-color':showError && email.invalid ? 'red': ''}">
  </div>

Вы можете проверить рабочий код здесь