import { Component , ViewChild , OnInit } from '@angular/core' ; import { FormBuilder , FormGroup , Validators , FormControl } from '@angular/forms' ; @ Component ( { selector : 'app-standard' , templateUrl : './standard.component.html' } ) export class StandardComponent implements OnInit { selectValue ; options = [ { value : 'jack' , label : 'Jack' } , { value : 'lucy' , label : 'Lucy' } , { value : 'disabled' , label : 'Disabled' , disabled : true } ] ; cityValue : any [ ] = null ; cities = [ { value : 'zhejiang' , label : 'Zhejiang' , children : [ { value : 'hangzhou' , label : 'Hangzhou' , children : [ { value : 'xihu' , label : 'West Lake' , isLeaf : true } ] , } ] , } , { value : 'jiangsu' , label : 'Jiangsu' , children : [ { value : 'nanjing' , label : 'Nanjing' , children : [ { value : 'zhonghuamen' , label : 'Zhong Hua Men' , isLeaf : true } ] , } ] , } ] ; marks = { 0 : 'A' , 25 : 'B' , 50 : 'C' , 75 : 'D' , 100 : 'E' } ; rate = 3 ; hotTags : string [ ] = [ 'Movie' , 'Books' , 'Music' , 'Sports' ] ; selectedTags : string [ ] = [ ] ; validateForm : FormGroup ; controlArray = [ ] ; isCollapse = true ; constructor ( private fb ) { this . selectValue = this . options [ 0 ] ; } ngOnInit ( ) { this . validateForm = this . fb . group ( { } ) ; for ( let i = 0 ; i < 10 ; i ++ ) { this . controlArray . push ( { index : i , show : i < 6 } ) ; this . validateForm . addControl ( `field${ i }` , new FormControl ( ) ) ; } } changeCity ( value ) { console . log ( value ) ; } handleChange ( checked , tag ) { if ( checked ) { this . selectedTags . push ( tag ) ; } else { this . selectedTags = this . selectedTags . filter ( t => t !== tag ) ; } console . log ( 'You are interested in: ' , this . selectedTags ) ; } toggleCollapse ( ) { this . isCollapse = ! this . isCollapse ; this . controlArray . forEach ( ( c , index ) => { c . show = this . isCollapse ? ( index < 6 ) : true ; } ) ; } resetForm ( ) { this . validateForm . reset ( ) ; } }