zoukankan      html  css  js  c++  java
  • [Angular2 Form] Create custom form component using Control Value Accessor

    //switch-control component 
    
    import { Component } from '@angular/core';
    import { ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators} from '@angular/forms';
    
    @Component({
      selector: 'switch-control',
      templateUrl: './switch-control.component.html',
      styleUrls: ['./switch-control.component.css'],
      providers: [
        {provide: NG_VALUE_ACCESSOR, multi: true, useExisting: SwitchControlComponent}
      ]
    })
    export class SwitchControlComponent implements ControlValueAccessor {
      isOn: boolean;
      _onChange: (value: any) => void;
    
      writeValue(value: any) {
        this.isOn = !!value;
      }
    
      registerOnChange(fn: (value: any) => void) {
        this._onChange = fn;
      }
    
      registerOnTouched() {}
    
      toggle(isOn: boolean) {
        this.isOn = isOn;
        this._onChange(isOn);
      }
    }

    The writeValue function allows you to update your internal model with incoming values, for example if you use ngModel to bind your control to data.

    The registerOnChange accepts a callback function which you can call when changes happen so that you can notify the outside world that the data model has changed. Note that you call it with the changed data model value.

    The registerOnTouched function accepts a callback function which you can call when you want to set your control to touched. This is then managed by Angular 2 by adding the correct touched state and classes to the actual element tag in the DOM.

    Using it:

        this.signupForm = fb.group({
          password: [
            '',
            Validators.required
          ],
          confirm: [
            '',
            [
              Validators.required,
              confirmPasswords.bind(undefined, this.signup)
            ]
          ],
          newsletter: true
        });
    <form novalidate autocomplete="off" [formGroup]="signupForm">
      <div class="form-field">
        <label>Password:</label>
        <input type="text" formControlName="password" [(ngModel)]="signup.password" name="password">
      </div>
      <div class="form-field">
        <label>Confirm Password: </label>
        <input type="text" formControlName="confirm" [(ngModel)]="signup.confirm" name="confrim">
        <div *ngIf="!signupForm.valid">
          <span *ngIf="signupForm.get('confirm').hasError('confirmPassword') && signupForm.get('confirm').touched">
            {{signupForm.get('confirm').errors?.confirmPassword.message}}
          </span>
          <span *ngIf="signupForm.get('confirm').hasError('required') && signupForm.get('confirm').dirty">This field is requred</span>
        </div>
        <switch-control formControlName="newsletter"></switch-control>
      </div>
    </form>

    Here in the code we set the default value to be true thought "writeValue" method handle by angular2, also we get updated value from the component thought "registonChange" method.

    Link: http://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel

    Github: https://github.com/kara/ac-forms/tree/master/src/app/switch-control

  • 相关阅读:
    Android Service 启动和停止服务
    Android 子线程中进行UI操作遇到的小问题
    JZ66 机器人的运动范围
    JZ65 矩阵中的路径
    JZ64 滑动窗口的最大值
    JZ63 数据流中的中位数
    Z62 二叉搜索树的第k个结点
    JZ61 序列化二叉树
    JZ60 把二叉树打印成多行
    JZ59 按之字形顺序打印二叉树
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6021173.html
Copyright © 2011-2022 走看看