欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

app.component.ts

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})`;
  }
}


普通分类: