Угловая проверка: проверка / выделение дочернего ввода при нажатии кнопки

Question

Используя Angular 6 здесь:

У меня есть родительский компонент, и внутри него у меня есть дочерний компонент.Дочерний компонент имеет текстовые поля.Родитель имеет кнопку отправки.

На кнопке отправки нажмите, я хочу проверить все входные данные дочернего элемента, если они необходимы, и выдать ошибку соответственно.

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

Я использовал свойство $ touch для моего ребенка, которое работает и показывает требуемую ошибку.Но я хочу, чтобы ошибка также отображалась в случае, если пользователь просто нажал кнопку.

Ниже приведен соответствующий код.

<code>--Parent--

<form class="form-horizontal" [formGroup]="myForm" (ngSubmit)="onSubmit()">
    <child [myForm]="myForm"></child>
  <button type="submit">Submit</button>
</form>

<br>
Form Valid:  <pre>{{myForm.valid}}

класс экспорта AppComponent {myForm: конструктор FormGroup (private fb: FormBuilder) {this.myForm = this.fb.group ({uname: ['',Validators.required]});} onSubmit () {console.log ('value:', this.myForm.value);console.log ('вся форма и ее элементы управления:', this.myForm)}} --Child--Имя: * Обязательно класс экспорта ChildComponent {@Input () myForm: FormGroup;ngOnInit () {}}

Я также создал демонстрацию, чтобы показать это по адресу:

https://stackblitz.com/edit/angular-dbevnj

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

Есть какие-либо входные данные, как решить эту проблему?

Answer 1

Мы решили эту проблему, вызвав markAsTouched во всех элементах управления при отправке формы.

В вашем случае вы можете добавить this.myForm.get('uname').markAsTouched(); к вашему onSubmit() методу.