浅析Angular19 自定义表单控件(5)

import { Component, OnInit, HostListener, Inject} from '@angular/core';
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Http } from '@angular/http';
import { QuoteService } from '../../service/quote.service';
@Component({
 selector: 'app-test01',
 templateUrl: './test01.component.html',
 styleUrls: ['./test01.component.scss']
})
export class Test01Component implements OnInit {
 countNumber: number = 9;
 outerCounterValue: number = 5; 
 ngif = true;
 loginForm: FormGroup;
 testForm: FormGroup;
 data: any;
 name: FormControl = new FormControl();
 desc: string = 'hello boy';
 taskLists = [
 {label: 1, name: '进行中'},
 {label: 2, name: '已完成'}
 ];
 constructor(
 private formBuilder: FormBuilder,
 private http: Http,
 @Inject('BASE_CONFIG') private baseConfig,
 private quoteService: QuoteService
 ) {}
 ngOnInit() {
 this.testForm = new FormGroup({
  email: new FormControl('', [Validators.required, Validators.minLength(4)], []),
  password: new FormControl('', [Validators.required], [])
 });
 this.name.valueChanges
 .debounceTime(500)
 .subscribe(value => alert(value));
 this.loginForm = this.formBuilder.group({
  username: ['', [Validators.required, Validators.minLength(4), this.myValidator], []],
  userpwd: ['', [Validators.required, Validators.minLength(6)], []]
 });
 this.quoteService.test()
 .subscribe(resp => console.log(resp));
 }
 onChangeNgifValue() {
 if (this.ngif == false) {
  this.ngif = true;
 } else {
  this.ngif = false;
 }
 }
 @HostListener('keyup.enter')
 onTestNgModelClick() {
 alert('提交');
 }
 onTestClick() {
 // this.data = this.testForm.get('email').value;
 // console.log(this.testForm.getError);
 console.log(this.testForm.controls['email']);
 }
 onTestLogin() {
 console.log(this.loginForm.value);
 if (this.loginForm.valid) {
  console.log('登陆数据合法');
 } else {
  console.log('登陆数据不合法');
  console.log(this.loginForm.controls['username'].errors);
  console.log(this.loginForm.get('userpwd').errors);
 }
 }
 myValidator(fc: FormControl): {[key: string]: any} {
 const valid = fc.value === 'admin';
 return valid ? null : {myValidator: {requiredUsername: 'admin', actualUsername: fc.value}};
 }
}