Блог

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

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

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

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

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

Вот некоторый соответствующий код.

 --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}}</pre>

export class AppComponent {
  myForm: FormGroup

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      uname: ['', Validators.required]
    });
  }

  onSubmit() {
    console.log('value: ', this.myForm.value);
    console.log('the whole form and its controls: ', this.myForm)
  }
}

--Child--

<div class="form-group" [formGroup]="myForm">
    <label for="myForm" class="col-sm-3 control-label">Name:</label>
    <div class="col-sm-8" [ngClass]="{ 'has-error': myForm.controls?.uname.errors }">
      <input type="text" formControlName="uname"  placeholder="Enter Name...">
      <em *ngIf="myForm.hasError('required', 'uname') amp;amp; myForm.controls?.uname.touched">*Required</em>
    </div>
  </div> 

export class ChildComponent {
  @Input() myForm: FormGroup;

  ngOnInit() {

  }
}
  

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

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

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

Любые входные данные, как это решить?

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

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