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

  • 相关阅读:
    在Linux系统中Navicat for MySQL 出现1045错误如何处理
    一个老程序员这些年的心得体会
    忘了
    DAY11
    day10_plus
    day10
    东北育才冲刺noip(day9)
    Java语言Socket接口用法详解
    JDBC-ODBC桥连接方式操纵SQL数据库
    JDBC连接SQL Server 2005步骤详解
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6021173.html
Copyright © 2011-2022 走看看