typescript - Where does ngOnInit come into play when it comes to handling forms (angular 2) -
so, understanding of ngoninit() ran within ngoninit method runs @ time page "initialized" (or loaded) up, 1 of lifecycle hooks. like
// importing in inject decorator because want // import datatype // inject decorators can used constructor properties import { component, inject } '@angular/core'; // import {formgroup} '@angular/forms'; // form builder has group method on forming // form gropus import { validators, formbuilder } '@angular/forms'; import { router } '@angular/router'; // importing our service inject import { mediaitemservice } './media-item.service'; import { lookuplisttoken } './providers'; @component({ selector: 'mw-media-item-form', templateurl: 'app/media-item-form.component.html', styleurls: ['app/media-item-form.component.css'] }) export class mediaitemformcomponent { form; // class property /* constructor allows constructor injection (notice injecting form builder oninit function) don't need form group , form control modules */ constructor( private formbuilder: formbuilder, private mediaitemservice: mediaitemservice, // injecting our value types inject decorator /* inject decorator takes in string literal represent object type , tells angular pass lookup list value constructor during constructor injection vvvvvv @inject('lookuplisttoken') lookuplist {} */ @inject(lookuplisttoken) public lookuplists, private router: router) {} /** initializing form event using angular lifecycle method (not in constructor because makes code easier unit test) called our "model" */ ngoninit() { this.form = this.formbuilder.group({ // below: fields = form controls medium: this.formbuilder.control('movies'), // compose method takes in array of validators name: this.formbuilder.control('', validators.compose([ //both validators must pass allow submission validators.required, // matching field must exist validation validators.pattern('[\\w\\-\\s\\/]+') // pattern validator ])), category: this.formbuilder.control(''), // notice above validators have paratheses , below 1 not // , above validators called functions... // that's because above validators return validator function // here handing form control our year validator function year: this.formbuilder.control('', this.yearvalidator), }); } /* these form *controls in form *group ngoninit() { this.form = new formgroup({ medium: new formcontrol(''), name: new formcontrol(''), category: new formcontrol('', validators.pattern('[\\w\\-\\s\\/]')), //second param on form control validator year: new formcontrol(''), }); } */ // custom validator (remember you're passing *controls above) yearvalidator(control) { // demonstrate year optional if (control.value.trim().length === 0) { return null; } // convert value number let year = parseint(control.value); let minyear = 1800; let maxyear = 2500; if (year >= minyear && year <= maxyear) { return null; } else { return { 'year': { min: minyear, max: maxyear } }; } } // injecting our add media item service onsubmit(mediaitem) { this.mediaitemservice.add(mediaitem) .subscribe(() => { this.router.navigate(['/', mediaitem.medium]); }); } }
why need ngoninit()? why don't nginit every view render a2 framework, aren't pages being "initialized", requiring output of something? when page (or whatever lifecycle) need in consideration?
Comments
Post a Comment