Angular 7自定义mat-checkbox使用ControlValueAccessor时无法更新表单的有效性。
创始人
2024-10-17 07:30:31
0

在使用Angular 7的自定义mat-checkbox时,如果使用ControlValueAccessor来处理表单控件的值和有效性,可能会遇到无法更新表单的有效性的问题。以下是一种解决方法的示例代码:

首先,创建一个自定义的mat-checkbox组件,该组件实现ControlValueAccessor接口:

import { Component, forwardRef, OnInit } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-custom-checkbox',
  templateUrl: './custom-checkbox.component.html',
  styleUrls: ['./custom-checkbox.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomCheckboxComponent),
      multi: true
    }
  ]
})
export class CustomCheckboxComponent implements ControlValueAccessor {

  isChecked: boolean = false;
  onChange: any = () => { };
  onTouched: any = () => { };

  constructor() { }

  writeValue(value: any): void {
    this.isChecked = value;
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setDisabledState?(isDisabled: boolean): void {
    // implement this if your checkbox needs to support disabled state
  }

  toggleChecked() {
    this.isChecked = !this.isChecked;
    this.onChange(this.isChecked);
  }
}

在上面的代码中,我们实现了ControlValueAccessor接口的方法,并且在toggleChecked方法中调用了onChange回调函数来通知表单控件的值已经发生变化。

接下来,在模板文件(custom-checkbox.component.html)中,我们可以使用mat-checkbox组件来实现自定义的复选框:


  Custom Checkbox

然后,我们可以在父组件的模板中使用自定义的mat-checkbox组件,并将其绑定到表单控件上:

最后,在父组件的代码中,我们需要在初始化表单时为自定义的mat-checkbox创建一个FormControl,并将其添加到FormBuilder中:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-parent-component',
  templateUrl: './parent-component.component.html',
  styleUrls: ['./parent-component.component.css']
})
export class ParentComponent implements OnInit {

  myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      checkbox: [false]
    });
  }
}

通过以上的实现,你应该能够在使用Angular 7的自定义mat-checkbox时正确地更新表单的有效性。

相关内容

热门资讯

两分钟辅助!开心泉州小程序开挂... 两分钟辅助!开心泉州小程序开挂有什么技巧,原来真的是有辅助插件(有挂教学)开心泉州小程序开挂有什么技...
七分钟辅助!奇迹脚本辅助,真是... 七分钟辅助!奇迹脚本辅助,真是有辅助软件(确实有挂)1、超多福利:超高返利,海量正版游戏,奇迹脚本辅...
一分钟辅助!天天贵阳智能辅助器... 一分钟辅助!天天贵阳智能辅助器,原来是有辅助脚本(真的有挂)亲,关键说明,天天贵阳智能辅助器透视脚本...
3分钟辅助!一起宁德钓蟹黑科技... 3分钟辅助!一起宁德钓蟹黑科技辅助软件推荐,其实真的有辅助挂(有挂存在)1、玩家可以在一起宁德钓蟹黑...
第二分钟辅助!大菠萝789辅助... 第二分钟辅助!大菠萝789辅助器下载,原来存在有辅助挂(存在有挂)运大菠萝789辅助器下载辅助工具,...
3分钟辅助!科乐填坑辅助,原来... 3分钟辅助!科乐填坑辅助,原来真的是有辅助器(有挂方略)1、下载好科乐填坑辅助透视辅助下载之后点击打...
3分钟辅助!潮友会透视辅助教程... 3分钟辅助!潮友会透视辅助教程,果然存在有辅助器(有挂辅助)亲,关键说明,潮友会透视辅助教程透视脚本...
4分钟辅助!福建兄弟十三冰修改... 4分钟辅助!福建兄弟十三冰修改器,本来真的是有辅助app(有挂讲解)1、游戏颠覆性的策略玩法,独创攻...
第二分钟辅助!wepoker插... 第二分钟辅助!wepoker插件程序,真是是真的有辅助技巧(有挂细节)1、不需要AI权限,帮助你快速...
1分钟辅助!悠悠互娱辅助,真是... 1分钟辅助!悠悠互娱辅助,真是是有辅助神器(有挂解密)悠悠互娱辅助透视方法中分为三种模型:悠悠互娱辅...