Проверка угловых 7 форм для динамического поля

Question

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

Если пользователь отправляет форму без ввода текстового поля, в нем должно отображаться сообщение об ошибке.

Предположим,

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

В моем сценарии.

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

Пожалуйста, посмотрите пример в stackblitz для лучшего понимания.

Answer 1

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

После отправки формы вы можете получить доступ к атрибуту submitугловая форма, используя ViewChild, и вы можете сделать это как false.Надеюсь, что это решит ваши проблемы

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  title = 'InputDirective';

  checkbox_a:boolean;
  checkbox_b:boolean;
  textbox1:string;
  textbox2:string;
  @ViewChild("angularForm", {static: false}) public angularForm: any;

  onSubmit() {
    alert('form submitted success..');
    this.angularForm.submitted = false;
  }

}

Stacblitz link -> https://stackblitz.com/edit/angular-jjm3lq