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

Popular posts from this blog

ZeroMQ on Windows, with Qt Creator -

unity3d - Unity SceneManager.LoadScene quits application -

python - Error while using APScheduler: 'NoneType' object has no attribute 'now' -