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

  • 相关阅读:
    vagrant+virtualbox 构建mac虚拟机环境
    python dns模块
    Ansible模块开发-自定义模块
    nginx rewrite 踩坑
    死磕nginx系列--nginx 目录
    死磕salt系列-salt文章目录汇总
    ant jmeter jenkins 实现自动化测试
    prometheus-入门尝试
    redis-Sentinel配置
    devops工具-Ansible进阶playbook&roles
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6021173.html
Copyright © 2011-2022 走看看