Angular 2カスタムフォーム入力

89

ネイティブ<input>タグのように機能するカスタムコンポーネントを作成するにはどうすればよいですか？カスタムフォームコントロールでngControl、ngForm、[（ngModel）]をサポートできるようにしたい。

私が理解しているように、自分のフォームコントロールをネイティブフォームと同じように機能させるには、いくつかのインターフェイスを実装する必要があります。

また、ngFormディレクティブは<input>タグのみにバインドするようですが、これは正しいですか？どうすれば対処できますか？

なぜこれが必要なのかを説明しましょう。複数の入力要素をラップして、それらを1つの入力として連携できるようにしたいと考えています。それを処理する他の方法はありますか？もう一度：このコントロールをネイティブコントロールと同じようにしたいと思います。検証、ngForm、ngModel双方向バインディングなど。

PS：Typescriptを使用しています。

typescript  angular 
— マクシムフォミン
ソース
1
現在のAngularバージョンに関するほとんどの回答は古くなっています。見ていstackoverflow.com/a/41353306/2176962を
— hgoebl

回答:

82

実際、2つのことを実装する必要があります。

  • フォームコンポーネントのロジックを提供するコンポーネント。ngModel単独で提供されるため、入力ではありません
  • ControlValueAccessorこのコンポーネントとngModel/の間のブリッジを実装するカスタムngControl

サンプルを取ってみましょう。会社のタグのリストを管理するコンポーネントを実装したいと思います。コンポーネントはタグの追加と削除を許可します。タグリストが空でないことを確認する検証を追加したいと思います。以下で説明するように、コンポーネントで定義します。

(...)
import {TagsComponent} from './app.tags.ngform';
import {TagsValueAccessor} from './app.tags.ngform.accessor';

function notEmpty(control) {
  if(control.value == null || control.value.length===0) {
    return {
      notEmpty: true
    }
  }

  return null;
}

@Component({
  selector: 'company-details',
  directives: [ FormFieldComponent, TagsComponent, TagsValueAccessor ],
  template: `
    <form [ngFormModel]="companyForm">
      Name: <input [(ngModel)]="company.name"
         [ngFormControl]="companyForm.controls.name"/>
      Tags: <tags [(ngModel)]="company.tags" 
         [ngFormControl]="companyForm.controls.tags"></tags>
    </form>
  `
})
export class DetailsComponent implements OnInit {
  constructor(_builder:FormBuilder) {
    this.company = new Company('companyid',
            'some name', [ 'tag1', 'tag2' ]);
    this.companyForm = _builder.group({
       name: ['', Validators.required],
       tags: ['', notEmpty]
    });
  }
}

TagsComponentコンポーネントは、の要素追加および削除するためのロジックを定義するtagsリスト。

@Component({
  selector: 'tags',
  template: `
    <div *ngIf="tags">
      <span *ngFor="#tag of tags" style="font-size:14px"
         class="label label-default" (click)="removeTag(tag)">
        {{label}} <span class="glyphicon glyphicon-remove"
                        aria-  hidden="true"></span>
      </span>
      <span>&nbsp;|&nbsp;</span>
      <span style="display:inline-block;">
        <input [(ngModel)]="tagToAdd"
           style="width: 50px; font-size: 14px;" class="custom"/>
        <em class="glyphicon glyphicon-ok" aria-hidden="true" 
            (click)="addTag(tagToAdd)"></em>
      </span>
    </div>
  `
})
export class TagsComponent {
  @Output()
  tagsChange: EventEmitter;

  constructor() {
    this.tagsChange = new EventEmitter();
  }

  setValue(value) {
    this.tags = value;
  }

  removeLabel(tag:string) {
    var index = this.tags.indexOf(tag, 0);
    if (index != undefined) {
      this.tags.splice(index, 1);
      this.tagsChange.emit(this.tags);
    }
  }

  addLabel(label:string) {
    this.tags.push(this.tagToAdd);
    this.tagsChange.emit(this.tags);
    this.tagToAdd = '';
  }
}

ご覧のとおり、このコンポーネントには入力はありませんが、setValue1つです（名前はここでは重要ではありません）。後でそれを使用して、ngModelからコンポーネントに値を提供します。このコンポーネントは、コンポーネントの状態（タグリスト）が更新されたときに通知するイベントを定義します。

このコンポーネントとngModel/の間のリンクを実装しましょうngControl。これは、ControlValueAccessorインターフェースを実装するディレクティブに対応します。NG_VALUE_ACCESSORトークンに対してこの値アクセサーのプロバイダーを定義する必要があります（forwardRefディレクティブが後で定義されるため、使用することを忘れないでください）。

ディレクティブはtagsChange、ホストのイベントにイベントリスナーをアタッチします（つまり、ディレクティブがアタッチされるコンポーネント、つまりTagsComponent）。onChangeイベントが発生したときにメソッドが呼び出されます。このメソッドは、Angular2によって登録されたメソッドに対応します。これにより、関連するフォームコントロールの変更と更新が認識されます。

にwriteValueバインドされた値ngFormが更新されると、が呼び出されます。アタッチされたコンポーネント（TagsComponentなど）を注入した後、それを呼び出してこの値を渡すことができます（前のsetValueメソッドを参照）。

CUSTOM_VALUE_ACCESSORディレクティブのバインディングでを提供することを忘れないでください。

これがカスタムの完全なコードですControlValueAccessor：

import {TagsComponent} from './app.tags.ngform';

const CUSTOM_VALUE_ACCESSOR = CONST_EXPR(new Provider(
  NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => TagsValueAccessor), multi: true}));

@Directive({
  selector: 'tags',
  host: {'(tagsChange)': 'onChange($event)'},
  providers: [CUSTOM_VALUE_ACCESSOR]
})
export class TagsValueAccessor implements ControlValueAccessor {
  onChange = (_) => {};
  onTouched = () => {};

  constructor(private host: TagsComponent) { }

  writeValue(value: any): void {
    this.host.setValue(value);
  }

  registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
  registerOnTouched(fn: () => void): void { this.onTouched = fn; }
}

この方法でtags会社のすべてを削除するvalidと、companyForm.controls.tagsコントロールの属性がfalse自動的に設定されます。

詳細については、この記事（「NgModel互換コンポーネント」のセクション）を参照してください。

— ティエリーテンプリエ
ソース
ありがとう！あなたは素晴らしいです！あなたはどう思いますか-この方法は実際に大丈夫ですか？つまり、入力要素を使用せず<textfield>、次のような独自のコントロールを作成し<dropdown>ます。これは「角度」のある方法ですか？
— Maksim Fomin 2016年
1
フォームにカスタムフィールドを実装する場合は、このアプローチを使用します。それ以外の場合は、ネイティブHTML要素を使用します。つまり、入力/テキストエリア/選択を表示する方法をモジュール化する場合（たとえば、Bootstrap3を使用）、ng-contentを活用できます。：この回答を参照してくださいstackoverflow.com/questions/34950950/...
— ティエリーTEMPLIER
3
上記はコードが欠落しており、「removeLabel」ではなく「removeLabel」などの不一致があります。完全な動作例については、こちらをご覧ください。最初の例を提示してくれたThierryに感謝します。
— Blue
1
それを見つけて、@ angular / commonの代わりに@ angular / formsからインポートして動作します。'@ angular / forms'から{NG_VALUE_ACCESSOR、ControlValueAccessor}をインポートします。
— Cagatay Civici
1
このリンクも..助けになるはずです
— リファクタリング
109

私がインターネットで見つけたすべての例がなぜそれほど複雑である必要があるのか​​理解できません。新しいコンセプトを説明するときは、可能な限り最も単純で実用的な例を使用することが常に最善だと思います。私はそれを少し蒸留しました：

ngModelを実装するコンポーネントを使用する外部フォームのHTML：

EmailExternal=<input [(ngModel)]="email">
<inputfield [(ngModel)]="email"></inputfield>

自己完結型コンポーネント（個別の「アクセサ」クラスはありません-多分私はポイントを逃しています）：

import {Component, Provider, forwardRef, Input} from "@angular/core";
import {ControlValueAccessor, NG_VALUE_ACCESSOR, CORE_DIRECTIVES} from "@angular/common";

const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = new Provider(
  NG_VALUE_ACCESSOR, {
    useExisting: forwardRef(() => InputField),
    multi: true
  });

@Component({
  selector : 'inputfield',
  template: `<input [(ngModel)]="value">`,
  directives: [CORE_DIRECTIVES],
  providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class InputField implements ControlValueAccessor {
  private _value: any = '';
  get value(): any { return this._value; };

  set value(v: any) {
    if (v !== this._value) {
      this._value = v;
      this.onChange(v);
    }
  }

    writeValue(value: any) {
      this._value = value;
      this.onChange(value);
    }

    onChange = (_) => {};
    onTouched = () => {};
    registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
    registerOnTouched(fn: () => void): void { this.onTouched = fn; }
}

実際、このすべてを抽象クラスに抽象化し、ngModelを使用する必要があるすべてのコンポーネントで拡張しました。私にとって、これは大量のオーバーヘッドとボイラープレートコードです。

編集：ここにあります：

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

export abstract class AbstractValueAccessor implements ControlValueAccessor {
    _value: any = '';
    get value(): any { return this._value; };
    set value(v: any) {
      if (v !== this._value) {
        this._value = v;
        this.onChange(v);
      }
    }

    writeValue(value: any) {
      this._value = value;
      // warning: comment below if only want to emit on user intervention
      this.onChange(value);
    }

    onChange = (_) => {};
    onTouched = () => {};
    registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
    registerOnTouched(fn: () => void): void { this.onTouched = fn; }
}

export function MakeProvider(type : any){
  return {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => type),
    multi: true
  };
}

これを使用するコンポーネントは次のとおりです：（TS）：

import {Component, Input} from "@angular/core";
import {CORE_DIRECTIVES} from "@angular/common";
import {AbstractValueAccessor, MakeProvider} from "../abstractValueAcessor";

@Component({
  selector : 'inputfield',
  template: require('./genericinput.component.ng2.html'),
  directives: [CORE_DIRECTIVES],
  providers: [MakeProvider(InputField)]
})
export class InputField extends AbstractValueAccessor {
  @Input('displaytext') displaytext: string;
  @Input('placeholder') placeholder: string;
}

HTML：

<div class="form-group">
  <label class="control-label" >{{displaytext}}</label>
  <input [(ngModel)]="value" type="text" placeholder="{{placeholder}}" class="form-control input-md">
</div>
— デビッド
ソース
1
興味深いことに、RC2以降、受け入れられた回答が機能しなくなったようです。私はこのアプローチを試してみましたが、なぜかはわかりません。
— 3urdoch
1
@ 3urdochかしこまりました、1秒
— デビッド
6
新しい@angular/formsjust updateインポートで機能させるには： import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
— ulfryk
6
Provider（）はAngular2 Finalではサポートされていません。代わりに、MakeProvider（）が{提供：NG_VALUE_ACCESSOR、useExisting：forwardRef（（）=> type）、multi：true}を返すようにします。
— DSoa 2016年
2
Angular2 final以降、デフォルトで提供されているのでCORE_DIRECTIVES、インポートして追加する必要はありません@Component。ただし、私のIDEによると、「派生クラスのコンストラクターには「スーパー」コールが含まれている必要がある」のでsuper();、コンポーネントのコンストラクターに追加する必要がありました。
— ジョセフウェバー
16

RC5バージョンのこのリンクに例があります：http : //almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel

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

const noop = () => {
};

export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CustomInputComponent),
    multi: true
};

@Component({
    selector: 'custom-input',
    template: `<div class="form-group">
                    <label>
                        <ng-content></ng-content>
                        <input [(ngModel)]="value"
                                class="form-control"
                                (blur)="onBlur()" >
                    </label>
                </div>`,
    providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class CustomInputComponent implements ControlValueAccessor {

    //The internal data model
    private innerValue: any = '';

    //Placeholders for the callbacks which are later providesd
    //by the Control Value Accessor
    private onTouchedCallback: () => void = noop;
    private onChangeCallback: (_: any) => void = noop;

    //get accessor
    get value(): any {
        return this.innerValue;
    };

    //set accessor including call the onchange callback
    set value(v: any) {
        if (v !== this.innerValue) {
            this.innerValue = v;
            this.onChangeCallback(v);
        }
    }

    //Set touched on blur
    onBlur() {
        this.onTouchedCallback();
    }

    //From ControlValueAccessor interface
    writeValue(value: any) {
        if (value !== this.innerValue) {
            this.innerValue = value;
        }
    }

    //From ControlValueAccessor interface
    registerOnChange(fn: any) {
        this.onChangeCallback = fn;
    }

    //From ControlValueAccessor interface
    registerOnTouched(fn: any) {
        this.onTouchedCallback = fn;
    }

}

その後、次のようにこのカスタムコントロールを使用できます。

<form>
  <custom-input name="someValue"
                [(ngModel)]="dataModel">
    Enter data:
  </custom-input>
</form>
— ダニール・キス
ソース
4
このリンクで質問に答えることができますが、回答の重要な部分をここに含め、参照用のリンクを提供することをお勧めします。リンクされたページが変更されると、リンクのみの回答が無効になる可能性があります。
— Maximilian Ast
5

ティエリーの例は役に立ちます。これは、TagsValueAccessorを実行するために必要なインポートです...

import {Directive, Provider} from 'angular2/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR } from 'angular2/common';
import {CONST_EXPR} from 'angular2/src/facade/lang';
import {forwardRef} from 'angular2/src/core/di';
— 青い
ソース
1

このケースの定型文を減らすのに役立つライブラリを作成しましたs-ng-utils。他の回答のいくつかは、単一のフォームコントロールをラップする例を示しています。それを使用s-ng-utilsすることは非常に簡単に使用できますWrappedFormControlSuperclass：

@Component({
    template: `
      <!-- any fancy wrapping you want in the template -->
      <input [formControl]="formControl">
    `,
    providers: [provideValueAccessor(StringComponent)],
})
class StringComponent extends WrappedFormControlSuperclass<string> {
  // This looks unnecessary, but is required for Angular to provide `Injector`
  constructor(injector: Injector) {
    super(injector);
  }
}

あなたの投稿では、複数のフォームコントロールを単一のコンポーネントにラップすることを述べています。これは、でそれを行う完全な例FormControlSuperclassです。

import { Component, Injector } from "@angular/core";
import { FormControlSuperclass, provideValueAccessor } from "s-ng-utils";

interface Location {
  city: string;
  country: string;
}

@Component({
  selector: "app-location",
  template: `
    City:
    <input
      [ngModel]="location.city"
      (ngModelChange)="modifyLocation('city', $event)"
    />
    Country:
    <input
      [ngModel]="location.country"
      (ngModelChange)="modifyLocation('country', $event)"
    />
  `,
  providers: [provideValueAccessor(LocationComponent)],
})
export class LocationComponent extends FormControlSuperclass<Location> {
  location!: Location;

  // This looks unnecessary, but is required for Angular to provide `Injector`
  constructor(injector: Injector) {
    super(injector);
  }

  handleIncomingValue(value: Location) {
    this.location = value;
  }

  modifyLocation<K extends keyof Location>(field: K, value: Location[K]) {
    this.location = { ...this.location, [field]: value };
    this.emitOutgoingValue(this.location);
  }
}

その後、使用することができます<app-location>し[(ngModel)]、[formControl]カスタムバリデータ、 -すべてあなたが箱から出してコントロールで角度支援を行うことができます。

— エリック・サイモントン
ソース
-1

内部ngModelを使用できるのに、なぜ新しい値アクセサーを作成するのですか？input [ngModel]を含むカスタムコンポーネントを作成するときはいつでも、ControlValueAccessorをインスタンス化しています。そして、それは私たちが必要とするアクセサーです。

テンプレート：

<div class="form-group" [ngClass]="{'has-error' : hasError}">
    <div><label>{{label}}</label></div>
    <input type="text" [placeholder]="placeholder" ngModel [ngClass]="{invalid: (invalid | async)}" [id]="identifier"        name="{{name}}-input" />    
</div>

成分：

export class MyInputComponent {
    @ViewChild(NgModel) innerNgModel: NgModel;

    constructor(ngModel: NgModel) {
        //First set the valueAccessor of the outerNgModel
        this.outerNgModel.valueAccessor = this.innerNgModel.valueAccessor;

        //Set the innerNgModel to the outerNgModel
        //This will copy all properties like validators, change-events etc.
        this.innerNgModel = this.outerNgModel;
    }
}

使用：

<my-input class="col-sm-6" label="First Name" name="firstname" 
    [(ngModel)]="user.name" required 
    minlength="5" maxlength="20"></my-input>
— ニシャント
ソース
これは有望に見えますが、superを呼び出しているため、「extends」が欠落しています
— Dave Nottage
1
はい、コード全体をここにコピーせず、super（）を削除するのを忘れていました。
— Nishant 2017
9
また、outerNgModelはどこから来たのですか？この答えは、完全なコードで提供する方がよいでしょう
— Dave Nottage
angular.io/docs/ts/latest/api/core/index/…に よるinnerNgModelと定義されていますngAfterViewInit
— Matteo
2
これはまったく機能しません。innerNgModelは初期化されず、outerNgModelは宣言されず、コンストラクタに渡されたngModelが使用されることはありません。
— user2350838 2017年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.