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