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"}
]
}
--
You received this message because you are subscribed to the Google Groups
"Angular" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
