Angular 2 ngModel从字符串转换为对象

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

export const CUSTOM_VALUE_ACCESSOR: Provider = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => StringToObjectConverter),
  multi: true
};

export class StringToObjectConverter implements ControlValueAccessor {
  private innerValue: any;

  // 将字符串转换为对象的方法
  private parseValue(value: string): any {
    // 在这里实现将字符串转换为对象的逻辑
    // 例如，可以使用JSON.parse()方法将JSON字符串转换为对象
    return JSON.parse(value);
  }

  // 将对象转换为字符串的方法
  private formatValue(value: any): string {
    // 在这里实现将对象转换为字符串的逻辑
    // 例如，可以使用JSON.stringify()方法将对象转换为JSON字符串
    return JSON.stringify(value);
  }

  // 当表单控件的值发生变化时调用的方法
  onChange = (value: any) => {};

  // 当表单控件被触摸时调用的方法
  onTouched = () => {};

  // 从表单控件获取值的方法
  get value(): any {
    return this.innerValue;
  }

  // 将值写入表单控件的方法
  set value(value: any) {
    if (value !== this.innerValue) {
      this.innerValue = value;
      this.onChange(value);
    }
  }

  // 将值从表单控件写入组件属性的方法
  writeValue(value: any): void {
    this.innerValue = this.parseValue(value);
  }

  // 注册当表单控件的值发生变化时调用的方法
  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  // 注册当表单控件被触摸时调用的方法
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }
}

import { CUSTOM_VALUE_ACCESSOR, StringToObjectConverter } from './string-to-object-converter';

@NgModule({
  // ...
  providers: [CUSTOM_VALUE_ACCESSOR, StringToObjectConverter],
  // ...
})
export class YourModule { }

<input type="text" [(ngModel)]="yourProperty" (ngModelChange)="stringToObjectConverter.value = $event">

import { StringToObjectConverter } from './string-to-object-converter';

@Component({
  // ...
})
export class YourComponent {
  constructor(public stringToObjectConverter: StringToObjectConverter) { }
}