1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
| 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: FormBuilder) {
| 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: boolean, tag: string): void {
| 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();
| }
| }
|
|
