bugfix> angular > 投稿

カスタムコンポーネント InputField がありますおよび SignupComponent リアクティブフォーム付き。

<ui-input-field formControlName="email" label="email"></ui-input-field>

これが好きなときは formControlName が出ますで ui-input-field 、タグ input にはありません 。解決方法

私は ControlValueAccessor を使用しますしかし、それがどのように機能するのか理解していない(メソッド writeValue()

import { Component, forwardRef, Input, OnInit } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@Component({
  selector: 'ui-input-field',
  template: `
  <div class="group">
    <input  required [formControlName] />
    <span class="bar"></span>
    <label>{{label}}</label>
</div>
    `,
  styleUrls: ['input.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InputFieldComponent),
      multi: true
    }]
})
export class InputFieldComponent implements OnInit, ControlValueAccessor {
  @Input() label: string;
  constructor() { }
  ngOnInit() {
  }    
  writeValue(value) {
    if (!value || typeof value !== 'string') {
      console.log('not value');
      return;
    }
  }    
  onChange: any = () => {
  }
  onTouched: any = () => {
  }
  registerOnChange(fn) {
    this.onChange(fn);
  }
  registerOnTouched(fn) {
    this.onTouched(fn);
  }
}

回答 1 件
  • 実装には多くの誤りがあります。

    ザ・ writeValue(obj: any): void  関数を使用して、コンポーネントの入力コントロールの値を設定する必要があります。これを正しく実装していません。

    ザ・ <input>   Component 内の要素   formControlName があってはいけません  それの属性。

    registerOnChange  および registerOnTouched   <input> を呼び出すたびに呼び出す関数が提供されます  変更されたか、触れられました。これを実装していません。

    ドキュメントには、処理方法に関する十分な詳細が記載されている必要があります。

あなたの答え