Question

我想创建自定义表单组件来处理错误消息本身。这些组件使用角度材料设计，并将在使用反应形式的页面中使用。

我简化了我的代码以消除噪音。这只是我想要完成的一个简单例子。

MyForm.component.ts

@Component({
  ...
  template: `
    <form [formGroup]="myForm">
      <app-text-input formControlName="myTextInput"></app-text-input>
    </form>
  `
})
export class MyForm implements OnInit {

  myForm: FormGroup;

  constructor(private fb: FormBuilder){}

  ngOnInit(): void {
    this.myForm = fb.group({myTextInput:['',Validators.required]});
  }
}

TextInput.component.ts

@Component({
  selector: 'app-text-input',
  template: `
    <div class="text-input">
      <md-input-container>
        <input mdInput [(ngModel)]="value">
        <md-error>This field is required</md-error>
      </md-input-container>
   </div>
  `,
  providers: [
    provide:     NG_VALUE_ACCESSOR,
    useExisting: forwardRef(()=>TextInput),
    multi:       true,
  ]
})

export class TextInput implements ControlValueAccessor {

  _value: string;

  get value() {
    return this._value;
  }

  set value(val) {
    this._value = val;
    this.propagateChange(val);
  }

  writeValue(value: string): void {
    if (value) {
      this._value = value;
    }
  }

  registerOnChange(fn) {
    this.propagateChange = fn;
  }

  registerOnTouched(): void {
  }

}

我尝试了几种方案：

A。使TextInput成为验证器（实现Validator，provider：NG_VALIDATORS）。通过这种方式，可以根据父级的反应形式了解TextInput组件的错误状态。但我无法将此状态传播到文本输入本身的输入容器中。我怎么能这样做？

B。将TextInput组件的验证器复制/粘贴到内部Input组件。我不知道如何正确地做到这一点......

C。误用mdHint和error-css，根据实施方案A时获取的错误状态显示错误。

我在搜索过程中使用的一些技巧：

获取表单控件元素的名称：

@Input()
formControlName: string;

在构造函数中获取TextInput的控件容器：

constructor(private controlContainer: ControlContainer) {}

ngOnInit(): void {
  this.control = this.controlContainer['form'].controls(this.formControlName);
}

获取包含内部输入元素的inputContainer：

@ViewChild(MdInputContainer) inputContainer: MdInputContainer;

ngAfterViewInit(): void {
  const innerControl = this.inputContainer._mdInputChild._ngControl;
  ...
}

Angular Material：如何使用inputContainer创建自定义表单组件以在被动表单中使用？

0 个答案: