angular9的学习(十四)

简单说的一些,我的所有文章基本都是个人的差缺补漏,学习的本身本来就是查缺补漏的,其中大量的时间都是花在看资料,吸收一下有价值的东西,然后我会把一些有价值的东西提取出来,只求有生之年能成为大佬

创建模块

ng g m homes --route home --module app

创建一个模块,在根模块appModule指定一个home的懒路由,会在homes-routing,定义一个空的homesComponent组件和路由

验证状态的修改statusChange

 this.fromDate1.get('firstName').statusChanges.subscribe(res => {
     // res== VALID  有效的
     // invalid  无效的
     console.log(res);
     console.log(this.fromDate1.get('firstName').status);// 两个的值是一样的,都是拿到最新的校验状态
    });
// 比如,如果验证通过我们就添加校验
	if(res=='VALID'){
        setValidators 添加校验
	    clearValidators  删除校验
        // 然后必须更新下才能生效
        updateValueAndValidity()
    }

值修改,设置校验

// valueChanges 是检测出值修改的
this.password.valueChanges.subscribe(
  pwd => {
	this.confirmPassword.setValidators([Validators.required, confirmPasswordValidator(pwd)]);        //设置校验
	this.confirmPassword.updateValueAndValidity();// 然后更新
  }
);

 get confirmPassword() {
    return this.userForm.get('confirmPassword');
  }   

修改值不让出发statusChanges事件

this.reactiveForm.get("firstname").setValue("", { emitEvent: false });

只自身被触发但是父级不会被触发

this.reactiveForm.get("firstname").setValue("", { onlySelf: true });

简单的说emitEvent 和onlySef 的效果都同时适用于valueChanges 和statusChanges事件

双向数据绑定监听绑定的值

 add(s) {
    console.log(s);
  }

官网从v6开始就不建议在表单中使用,后续可能会被废除

但是我在v10中使用是正常的

百分比管道PercentPipe

{{nums|percent:'a.b-c'}}
a 最小的整数位,默认1
b 小数点后最小的位数,默认0
c 小数点后最大位数,默认0

num1=0.123
{{nums|percent}}
// 12%
{{nums|percent:'1.2-2'}}
// 12.30%  保留两位小数

async管道

 public obs = new Observable(obser => {
    setTimeout(() => {
      obser.next('sss');
    }, 1000);
  });


  {{value}}


  Observable is loading. Please wait

异步管道和ngFor组合

 public obs = new Observable(obser => {
    setTimeout(() => {
      obser.next({"message":["afghan","basset","blood","english","ibizan","plott","walker"],"status":"success"}
      );
    }, 1000);
  });


  

    {{breed}}
  

=========

  
{{item}}
      

OnChanges 生命周期

父传子的时候,检测出每个输入属性的更改

父

++
--
------------
 public count = 1;
  add(): void {
    this.count++;
  }
  methods(): void {
    this.count--;
  }

子

接受属性,利用OnChanges 检测每个值的修改

  @Input('count') count;
  ngOnChanges(changes: SimpleChanges): void {
    console.log(changes);

  }

previousValue:any	之前的值
currentValue:any	新值
firstChange():boolean	是否是第一次的值Boolean

Form 禁用启用

禁用某个值
 this.reactiveForm.get("email").disable();
启用某个值
 this.reactiveForm.get("address").enable();
禁用所有
this.reactiveForm.disable();
启用所有
this.reactiveForm.enable();

FormArray 添加某个值

newSkill(): FormGroup {
   return this.fb.group({
     skill: '',
     exp: '',
   })
}
// 动态增加
addSkills() {
   this.skills.push(this.newSkill());
}

FormArray 删除元素

this.skills.removeAt(i)

FormArray的使用

  

    

      

        {{i}}
        skill name :
        
        exp:
        
 
        Remove
      
    
  

拿到FormArray 的某一项

  this.teachersForm = this.fb.group({
      teachers: this.fb.array([
          this.fb.group({
     		 name: '',
   			 batches: this.fb.array([])
  			  })
      ]),
    })
// 拿到数组
 teachers(): FormArray {
    return this.teachersForm.get("teachers") as FormArray
  }
// 拿到某个子数组的 batches
  batches(ti): FormArray {
    return this.teachers().at(ti).get("batches") as FormArray
  }

下拉框提示语

 
    提示语
    {{country.name}}
  

Form 验证器

firstname: new FormControl('',[Validators.required,Validators.minLength(10),Validators.maxLength(15),Validators.pattern("^[a-zA-Z]+$"),Validators.email]),

禁用提交

Submit

错误信息

  

    

      First Name is required
    
    

      Min Length is 10
    
  

发现一个重要的忽略的知识点,自定义校验器,传递参数

export function gte(val: number): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    let v: number = +control.value;
    if (isNaN(v)) {
      return { 'gte': true, 'requiredValue': val }
    }
    if (v <= +val) {
      return { 'gte': true, 'requiredValue': val }
    }
    return null;
  }
}

public teaForm: FormGroup;
this.teaForm = this.fb.group({
      firstName: ['',[gte(10)]]
    });