You are here
app.component.ts
星期三, 2023-01-04 01:58 — adminshiping1
import { HttpClient } from '@angular/common/http';
import { Component, OnInit, ViewChild } from '@angular/core';
import {
FormControl,
FormGroup,
FormGroupDirective,
NgForm,
Validators,
} from '@angular/forms';
import {
MatCheckboxChange,
MatCheckboxDefaultOptions,
MAT_CHECKBOX_DEFAULT_OPTIONS,
} from '@angular/material/checkbox';
import { ErrorStateMatcher, MatRipple } from '@angular/material/core';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import { MatIconRegistry } from '@angular/material/icon';
import { MatDrawerToggleResult, MatSidenav } from '@angular/material/sidenav';
import { MatStepperIntl } from '@angular/material/stepper';
import { DomSanitizer } from '@angular/platform-browser';
import * as moment from 'moment';
import { debounceTime, map, Observable } from 'rxjs';
export class TwStepperIntl extends MatStepperIntl {
override optionalLabel = '非必填';
}
export class EarlyErrorStateMatcher implements ErrorStateMatcher {
isErrorState(
control: FormControl | null,
form: FormGroupDirective | NgForm | null
): boolean {
const isSubmitted = form && form.submitted;
return !!(control && control.invalid && control.dirty);
}
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [
{ provide: MatStepperIntl, useClass: TwStepperIntl },
{
provide: MAT_CHECKBOX_DEFAULT_OPTIONS,
useValue: {
clickAction: 'check-indeterminate',
} as MatCheckboxDefaultOptions,
},
],
})
export class AppComponent implements OnInit {
title = 'app';
indeterminateSelectedPayFor: boolean;
isLinear: boolean = true;
surveyForm: FormGroup;
earlyErrorStateMacher = new EarlyErrorStateMatcher();
countries$: Observable<any[]>;
majorTechList: any[];
startDate = moment('1999-1-10');
minDate = moment('1999-1-5');
maxDate = moment('1999-1-15');
interestList: any[];
nestInterestList: any[];
// formatAlignGroup: any;
// buttonToggleBold: any;
// buttonToggleItalic: any;
// buttonToggleUnderlined: any;
@ViewChild(MatRipple) ripple: MatRipple;
constructor(
private matIconRegistry: MatIconRegistry,
private domSanitizer: DomSanitizer,
private httpClient: HttpClient
) {
this.matIconRegistry.addSvgIconInNamespace(
'custom-svg',
'thumbs-up',
this.domSanitizer.bypassSecurityTrustResourceUrl(
'assets/images/angular_solidBlack.svg'
)
);
this.matIconRegistry.addSvgIconInNamespace(
'custom-svg',
'angular',
this.domSanitizer.bypassSecurityTrustResourceUrl(
'assets/images/angular_solidBlack.svg'
)
);
console.log('constructor');
this.matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
this.surveyForm = new FormGroup({
basicQuestions: new FormGroup({
name: new FormControl('', Validators.required),
intro: new FormControl('', [
Validators.required,
Validators.minLength(10),
]),
country: new FormControl(''),
majorTech: new FormControl(''),
birthday: new FormControl({ value: '', disabled: true }),
interest: new FormControl(null),
}),
mainQuestions: new FormGroup({
payForAll: new FormControl(false),
payForBook: new FormControl(false),
payForMusic: new FormControl(false),
payForMovie: new FormControl(true),
angularLikeScore: new FormControl(5),
angularMaterialLikeScore: new FormControl(5),
subscribeAngular: new FormControl(true),
subscribeAngularMaterial: new FormControl(true),
subscribeNgRx: new FormControl(false),
}),
otherQuestions: new FormGroup({
favoriteColorRed: new FormControl(0),
favoriteColorGreen: new FormControl(0),
favoriteColorBlue: new FormControl(0),
surveyScore: new FormControl(5),
}),
});
}
ngOnInit() {
console.log('init');
// this.countries$ = this.httpClient.get<any[]>('assets/countries.json');
this.surveyForm
.get('basicQuestions')
.get('country')
.valueChanges.pipe(debounceTime(300))
.subscribe((inputCountry) => {
this.countries$ = this.httpClient
.get<any[]>('assets/countries.json')
.pipe(
map((countries) => {
return countries.filter(
(country) => country.name.indexOf(inputCountry) >= 0
);
})
);
});
this.majorTechList = [
{
name: '前端',
items: ['HTML', 'CSS', 'JavaScript'],
},
{
name: '後端',
items: ['C#', 'NodeJs', 'Go'],
},
];
this.interestList = [
{
id: 1,
name: '桌球',
},
{
id: 2,
name: '網球',
},
{
id: 3,
name: '羽球',
},
];
this.nestInterestList = [
{
id: 1,
name: '球類',
subItems: [
{
id: 11,
name: '桌球',
},
{
id: 12,
name: '網球',
},
{
id: 13,
name: '羽球',
},
],
},
{
id: 2,
name: '其他',
subItems: [
{
id: 21,
name: '游泳',
},
{
id: 22,
name: '跑步',
},
],
},
];
}
triggerRipple() {
const point1 = this.ripple.launch(0, 0, {
color: 'pink',
centered: true,
persistent: true,
radius: 50,
});
const point2 = this.ripple.launch(0, 0, {
color: 'yellow',
centered: true,
persistent: true,
radius: 20,
});
setTimeout(() => {
point1.fadeOut();
}, 500);
}
clearRipple() {
this.ripple.fadeOutAll();
}
ngAfterViewInit(): void {
// this.ripple.launch(0, 0);
// console.log('ngAfterViewInit');
}
toggleSideNav(sideNav: MatSidenav) {
sideNav.toggle().then((result: MatDrawerToggleResult) => {
console.log('result');
console.log(result);
console.log(`選單狀態：${result}`);
});
}
opened() {
console.log('芝麻開門');
}
closed() {
console.log('芝麻關門');
}
highlightFiltered(countryName: string) {
const inputCountry = this.surveyForm
.get('basicQuestions')
.get('country').value;
return countryName.replace(
inputCountry,
`<span class="autocomplete-highlight">${inputCountry}</span>`
);
}
displayCountry(country: any) {
console.log(country);
if (country) {
return `${country.name} / ${country.code}`;
} else {
return '';
}
}
familyDayFilter(date: moment.Moment): boolean {
if (date != null) {
const day = date.day();
return day !== 2 && day !== 5;
} else {
return true;
}
}
logDateInput($event: MatDatepickerInputEvent<moment.Moment>) {
console.log($event);
}
logDateChange($event: MatDatepickerInputEvent<moment.Moment>) {
console.log($event);
}
checkAllChange($event: MatCheckboxChange) {
this.surveyForm
.get('mainQuestions')
.get('payForBook')
.setValue($event.checked);
this.surveyForm
.get('mainQuestions')
.get('payForMusic')
.setValue($event.checked);
this.surveyForm
.get('mainQuestions')
.get('payForMovie')
.setValue($event.checked);
this._setSelectAllState();
}
payForChange() {
this._setSelectAllState();
}
private _setSelectAllState() {
const payForBook = this.surveyForm
.get('mainQuestions')
.get('payForBook').value;
const payForMusic = this.surveyForm
.get('mainQuestions')
.get('payForMusic').value;
const payForMovie = this.surveyForm
.get('mainQuestions')
.get('payForMovie').value;
const count =
(payForBook ? 1 : 0) + (payForMusic ? 1 : 0) + (payForMovie ? 1 : 0);
this.surveyForm
.get('mainQuestions')
.get('payForAll')
.setValue(count === 3);
this.indeterminateSelectedPayFor = count > 0 && count < 3;
}
get selectedColorRed() {
return this.surveyForm.get('otherQuestions').get('favoriteColorRed').value;
}
get selectedColorGreen() {
return this.surveyForm.get('otherQuestions').get('favoriteColorGreen')
.value;
}
get selectedColorBlue() {
return this.surveyForm.get('otherQuestions').get('favoriteColorBlue').value;
}
get selectedColorStyle() {
return `rgb(${this.selectedColorRed}, ${this.selectedColorGreen}, ${this.selectedColorBlue})`;
}
}
普通分类: