import { Router , ActivatedRoute } from '@angular/router' ; import { Component , OnInit , ViewChild , NgZone } from '@angular/core' ; import { COMMA , ENTER } from '@angular/cdk/keycodes' ; import { MatChipInputEvent } from '@angular/material/chips' ; import { ApiService } from './../../shared/api.service' ; import { FormGroup , FormBuilder , Validators } from "@angular/forms" ; export interface Subject { name : string ; } @ Component ( { selector : 'app-edit-student' , templateUrl : './edit-student.component.html' , styleUrls : [ './edit-student.component.css' ] } ) export class EditStudentComponent implements OnInit { visible = true ; selectable = true ; removable = true ; addOnBlur = true ; @ ViewChild ( 'chipList' , { static : true } ) chipList ; @ ViewChild ( 'resetStudentForm' , { static : true } ) myNgForm ; readonly separatorKeysCodes : number [ ] = [ ENTER , COMMA ] ; studentForm : FormGroup ; subjectArray : Subject [ ] = [ ] ; SectioinArray : any = [ 'A' , 'B' , 'C' , 'D' , 'E' ] ; ngOnInit ( ) { this . updateBookForm ( ) ; } constructor ( public fb , private router , private ngZone , private actRoute , private studentApi ) { var id = this . actRoute . snapshot . paramMap . get ( 'id' ) ; this . studentApi . GetStudent ( id ) . subscribe ( data => { console . log ( data . subjects ) ; this . subjectArray = data . subjects ; this . studentForm = this . fb . group ( { student_name : [ data . student_name , [ Validators . required ] ] , student_email : [ data . student_email , [ Validators . required ] ] , section : [ data . section , [ Validators . required ] ] , subjects : [ data . subjects ] , dob : [ data . dob , [ Validators . required ] ] , gender : [ data . gender ] } ) ; } ) ; } updateBookForm ( ) { this . studentForm = this . fb . group ( { student_name : [ '' , [ Validators . required ] ] , student_email : [ '' , [ Validators . required ] ] , section : [ '' , [ Validators . required ] ] , subjects : [ this . subjectArray ] , dob : [ '' , [ Validators . required ] ] , gender : [ 'Male' ] } ) ; } add ( event ) { const input = event . input ; const value = event . value ; if ( ( value || '' ) . trim ( ) && this . subjectArray . length < 5 ) { this . subjectArray . push ( { name : value . trim ( ) } ) ; } if ( input ) { input . value = '' ; } } remove ( subject ) { const index = this . subjectArray . indexOf ( subject ) ; if ( index >= 0 ) { this . subjectArray . splice ( index , 1 ) ; } } formatDate ( e ) { var convertDate = new Date ( e . target . value ) . toISOString ( ) . substring ( 0 , 10 ) ; this . studentForm . get ( 'dob' ) . setValue ( convertDate , { onlyself : true } ) ; } public handleError = ( controlName , errorName ) => { return this . studentForm . controls [ controlName ] . hasError ( errorName ) ; } ; updateStudentForm ( ) { console . log ( this . studentForm . value ) ; var id = this . actRoute . snapshot . paramMap . get ( 'id' ) ; if ( window . confirm ( 'Are you sure you want to update?' ) ) { this . studentApi . UpdateStudent ( id , this . studentForm . value ) . subscribe ( res => { this . ngZone . run ( ( ) => this . router . navigateByUrl ( '/students-list' ) ) ; } ) ; } } }