Угловой 7 - флаг прикосновения к вложенной форме мешает нажатию кнопки родительской формы

Question

У меня есть родительская форма и несколько вложенных компонентов внутри нее.Родительская форма имеет кнопку отправки, которая при щелчке должна вызывать все проверки полей.Каждый вложенный компонент имеет валидацию полей, которая должна появляться на комбинации «затронут» и недействительна.Что происходит, если пользователь сфокусирован на входах одного из вложенных компонентов, родительская форма не регистрирует нажатие кнопки «Отправить» (как если бы первый щелчок фокусировался на входе компонента, а затем второй щелчок регистрировал бынажатие кнопки).Если я изменю флаг прикосновения на «грязный», а это не то поведение, которое мне нужно, кнопка «отправить» регистрирует щелчок.Пожалуйста, помогите:)

Родительская форма:

export class ParentComponent implements OnInit {

  parentForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.parentForm= this.formBuilder.group({
      planetsForm: this.formBuilder.group({
        planets: ['', [Validators.required]]
      }),
      fruitsForm: this.formBuilder.group({
        fruits: ['', [Validators.required]
      })
   });

   isFieldInvalid(field: FormControl) {
      return field.errors && field.touched; //this is the touched that gives me trouble 
   }

  onSubmit() {
    console.log("clicked"); //Doesnt get called when the cursor is focused within the planets or fruits input box
    this.validateAllFormFields(this.parentForm);
  }

  validateAllFormFields(formGroup: FormGroup) {
     Object.keys(formGroup.controls).forEach(field => {
     const control = formGroup.get(field);
     if (control instanceof FormControl) {
       control.markAsTouched({ onlySelf: true });
     } else if (control instanceof FormGroup) {
       this.validateAllFormFields(control);
     }
  });

}

Родительская форма HTML:

<form class="form-inline" [formGroup]="parentForm" novalidate>

    <app-planets [group]="parentForm.get('planetForm')" [hasError]="isFieldInvalid(parentForm.get('planetForm').get('planets'))">

    <app-fruits [group]="parentForm.get('fruitForm')" [hasError]="isFieldInvalid(parentForm.get('fruitForm').get('fruits'))">

    <button type="submit" (click)="onSubmit()">Submit</button>

</form>

Дочерний компонент (планеты и фрукты одинаковы):

export class AppPlanetsComponent implements OnInit {

   @Input() hasError;
   @Input() group: FormGroup;

   constructor(private formBuilder: FormBuilder) {}

   ngOnInit() {}
}

Дочерняя составляющая (планеты и фрукты одинаковы):

 <div class="form-inline" [formGroup]="group">
      <div class="row">
           <div class="col-xs-6 col-sm-6 form-group form-group-padding">  
                <div class="col-xs-8 col-sm-8 no-padding">
                    <input type="text" class="form-control full-width" id="fruits" formControlName="fruits">
                </div>  

                <div *ngIf="hasError">
                     This is a dummy error message!
                </div>
           </div>
      </div>

 </div>