Angular: проверка формы с несколькими дочерними компонентами

Если вы не хотите использовать random.choice (), вы можете попробовать следующим образом:

>>> list(myDictionary)[i]
'VENEZUELA'
>>> myDictionary = {'VENEZUELA':'CARACAS', 'IRAN' : 'TEHRAN'}
>>> import random
>>> i = random.randint(0, len(myDictionary) - 1)
>>> myDictionary[list(myDictionary)[i]]
'TEHRAN'
>>> list(myDictionary)[i]
'IRAN'
0
задан karen 7 March 2019 в 14:56
поделиться

1 ответ

Я бы переместил кнопку отправки в дочернем компоненте 3 в родительский компонент, после чего вы можете использовать @ViewChild(), чтобы получить ссылку на дочерние компоненты и формы в компоненте, которые позволят вам проверить их действительность. [ 115]

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

@Component({
  selector: 'ct-parent',
  templateUrl: './parent.component.html']
})
export class ParentComponent implements OnInit  {

    @ViewChild(Child1Component) child1Component: Child1Component; 
    @ViewChild(Child2Component) child2Component: Child2Component;
    @ViewChild(Child3Component) child3Component: Child3Component;

    constructor() {}

    ngOnInit() {}  

    submitlClicked() {
        //check if form is valid, else throw error
        if (this.child1Component.myFormGroup.valid 
            && this.child2Component.myFormGroup.valid 
            && this.child3Component.myFormGroup.valid) {
            // do something
        } else {
            // throw error
        }
    }
}

Вам необходимо изменить код и использовать Reactive Forms ( https://angular.io/guide/reactive-forms ):

-- Child 1 --

<form [formGroup]="myFormGroup">
  <div class="panel-body">
     <div class="form-group">
         <label class="col-sm-3 control-label">Name:</label>
         <div class="col-sm-8">
             <input type="text" class="form-control" name="uname" formControlName="name" placeholder="Enter Name..." required>
         </div>
      </div>      
   </div>
</form>

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'ct-child1',
  templateUrl: './child1.component.html']
})
export class Child1Component implements OnInit {

    myFormGroup: FormGroup; 

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

    ngOnInit() {}
}
0
ответ дан chris 7 March 2019 в 14:56
поделиться
Другие вопросы по тегам:

Похожие вопросы: