Angular 2 - Validation from parent component to child

704 views
Skip to first unread message

Jo bobber

unread,
Dec 15, 2016, 4:38:00 PM12/15/16
to Angular
Could someone offer some advice, is it possible to validate a child component.  The following code below works great with the following code.
What I can't seem to get working is for the parent component to fire the validation on the child.

Any help would be greatly appreciated.


    // ***********  Using this control on model driven form ***********
    //
    //                     markup
    //  <us_states (selected)="stateSelected($event)"></us_states>
    //
    //          Create a model from control
    //   this.form = new FormGroup({state: new FormControl('-1', Validators.required) });
    //
    //         set the form control on selection
    //   stateSelected($event) {  this.form.controls['state'].setValue($event.selected);}
    //
    // *****************************************************************



import { element } from 'protractor';
import { Component, OnInit, OnDestroy,  Input, Output, EventEmitter } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators }    from '@angular/forms';

@Component({
    selector: 'us_states',
    template: `
        <label for="state">State:</label>
        <select class="form-control" id="state" formControlName="state" #s (change)="OnSelect(s.value)" style="height: 28px;">
            <option value="-1" selected="selected">Select</option>
            <option *ngFor="let w of states" value="{{w.State }}">
                {{ w.State }}
            </option>
        </select>
        <div *ngIf="validate">
            <div *ngIf="form.controls.state.touched && !form.controls.state.valid" class="alert alert-danger">
                <span class="glyphicon glyphicon-warning-sign"></span><strong> Warning!</strong> Please select a state!
            </div>
        </div>
    `
})
export class StatesComponent implements OnInit {
   
    form: FormGroup;  
    @Output() selected = new EventEmitter();
    @Input() validate = false;
    @Input() reset = false;

    ngOnInit(): void {
       
    }
   
    ngOnDestroy() {
      this.selected.unsubscribe();
    }   

    OnSelect(selected) {
        this.selected.emit({selected: selected});
    }

states =  [
            {"State": "AL", "Name": "Alabama" },{"State": "AK", "Name": "Alaska"},
            {"State": "AS", "Name": "American Samoa"}, {"State": "AZ", "Name": "Arizona"},
            {"State": "AR", "Name": "Arkansas"},{"State": "AK", "Name": "Alaska"},
            {"State": "CA", "Name": "California"},{"State": "CO","Name": "Colorado"},
            {"State": "CT", "Name": "Connecticut"},{"State": "DE", "Name": "Delaware"},
            {"State": "DC", "Name": "District Of Columbia"},{"State": "FM", "Name": "Federated States of Micronesia"},
            {"State": "FL", "Name": "Florida"},{"State": "GA", "Name": "Georgia"},
            {"State": "GU", "Name": "Guam"},{"State": "HI", "Name": "Hawaii"},
            {"State": "ID", "Name": "Idaho"},{"State": "IL", "Name": "Illinois"},
            {"State": "IN", "Name": "Indiana"},{"State": "IA", "Name": "Iowa"},
            {"State": "KS", "Name": "Kansas"},{"State": "KY",  "Name": "Kentucky"},
            {"State": "LA", "Name": "Louisiana"},{"State": "ME", "Name": "Maine"},
            {"State": "MH", "Name": "Marshall Islands"},{"State": "MD", "Name": "Maryland"},
            {"State": "MA", "Name": "Massachusetts"},{"State": "MI", "Name": "Michigan" },
            {"State": "MN", "Name": "Minnesota"},{"State": "MS", "Name": "Mississippi"},
            {"State": "MO", "Name": "Missouri"},{"State": "MT", "Name": "Montana"},
            {"State": "NE", "Name": "Nebraska"},{"State": "NV", "Name": "Nevada"},
            {"State": "NH", "Name": "New Hampshire"},{"State": "NJ", "Name": "New Jersey"},
            {"State": "NM", "Name": "New Mexico"},{"State": "NY", "Name": "New York"},
            {"State": "NC", "Name": "North Carolina"},{"State": "ND", "Name": "North Dakota"},
            {"State": "MP", "Name": "Northern Mariana Islands"},{"State": "OH", "Name": "Ohio"},
            {"State": "OK", "Name": "Oklahoma"},{"State": "OR", "Name": "Oregon"},
            {"State": "PW", "Name": "Palau"},{"State": "PA", "Name": "Pennsylvania"},
            {"State": "PR", "Name": "Puerto Rico"},{"State": "RI", "Name": "Rhode Island"},
            {"State": "SC", "Name": "South Carolina"},{ "State": "SD", "Name": "South Dakota"},
            {"State": "TN", "Name": "Tennessee"},{"State": "TX", "Name": "Texas"},
            {"State": "UT", "Name": "Utah"},{"State": "VT", "Name": "Vermont"},
            {"State": "VI", "Name": "Virgin Islands"},{"State": "VA", "Name": "Virginia"},
            {"State": "WA", "Name": "Washington"},{"State": "WV", "Name": "West Virginia"},
            {"State": "WI", "Name": "Wisconsin"},{"State": "WY", "Name": "Wyoming"}
         ] 



}
Reply all
Reply to author
Forward
0 new messages