Question

我正在尝试让ControlValueAccessor和formControlName与客户的Material Input Textbox一起使用。由于某种原因，代码无法正常工作，并尝试对其进行修复。阅读大量教程，并应用ControlValueAccsor。我们应该使用MAT_INPUT_VALUE_ACCESSOR吗？用材料角最简单的解决方法是什么？

目标是使此样式化文本框与Forms一起使用。

打字稿：

private async void Button_OnClicked(object sender, EventArgs e)
   {
      await DisplayAlert("0", "0", "OK");
      await DisplayAlert("5", "5", "OK");
   }

HTML：

import { Component, OnInit, Input, ViewChild, EventEmitter, Output, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-input-textbox',
  templateUrl: './input-textbox.component.html',
  styleUrls: ['./input-textbox.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InputTextboxComponent),
      multi: true
    }
  ]
})

export class InputTextboxComponent implements OnInit, ControlValueAccessor {
  @Input() MaxLength: string;
  @Input() Disabled: boolean;
  @Input() ReadOnly: boolean;
  @Input() NgClass:string;
  @Input() Value: string;
  @Input() type: string;
  @Input() Label: string;
  @Input() PlaceHolder: string;
  @Output() saveValue = new EventEmitter();
  @Output() onStateChange = new EventEmitter();

  disabled: boolean;

  constructor() { }

  ngOnInit() {
  }

  saveValueAction(e) {
    this.saveValue.emit(e.target.value);
  }

  onChange(e) {
    this.Value = e;
  }

  onTouched() {
    this.onStateChange.emit();
  }

  writeValue(value: any) {
    this.Value = value ? value : '';
  }

  registerOnChange(fn: any) { this.onChange = fn; }

  registerOnTouched(fn: any) { this.onTouched = fn; }

  setDisabledState(isDisabled) { this.disabled = isDisabled; }
}

Answer 1

表单组之所以没有从InputTextboxComponent接收值，是因为每次onChange元素从用户接收到新值时，都不会调用input方法。我在input内为InputTextboxComponent元素添加了一个变化事件监听器，并从那里调用了onChange方法。（input-text-box.component.ts的第58行）

示例：https://stackblitz.com/edit/angular-h4ebkp

角材料输入文本框包装器，可与ControlValueAccessor和内部formControlName一起使用

1 个答案: