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"}
]
}