如何将角度材质表单包装到组件中并将它们作为formControl元素公开给FormGroup

问题描述 投票:0回答:1

我试图将一个组件(例如名为custom-input)封装为基于Angular材质组件的formControl元素,以包含以下内容:

<mat-form-field >
  <input
    matInput
    [formControl]="inputField"
    formControlName="{{ name }}"
    name="{{ name }}"
    maxlength="{{ maxlength }}"
    placeholder="{{ name | translate }}"
    required
  />
  <mat-error *ngIf="inputField.errors">{{
    this.validationService.getErrorMsg(inputField.errors)
  }}</mat-error>
</mat-form-field>

现在这个组件正在使用所需的功能,但不能使用formControlName属性绑定到formGroup,如普通输入或matInput(如下面的例子,它直接绑定到formGroup而没有问题)

<input
  matInput
  formControlName="inputField123"
  placeholder="{{ 'testInput' | translate }}"
  required
/>

问题是如何启用上面的组合组件绑定为formGroup中的formControl元素?我应该实现或公开以提供此功能?

我应该使用ControlValueAccessor还是有更好的方法用于材料输入组件?

javascript angular typescript angular2-forms angular-reactive-forms
1个回答
1
投票

经过长时间的搜索,主要是因为ControlValueAccessor被建议用于原始html部分(如输入左右,不是材料组件,我认为可能有一些更简单的包装技术)

我终于发现我们可以按照建议实现ControlValueAccessor,或者因为这是一个输入字段,我们可以像这样使用DefaultValueAccessor

@Component({
  selector: 'app-test-input',
  templateUrl: './test-input.component.html',
  styleUrls: ['./test-input.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => testInputComponent),
      multi: true
    }
  ]
})
export class testInputComponent implements ControlValueAccessor {
  @Input() name = '';
  @Input() maxlength = 250;
  @Input() width = 30;

  @ViewChild(DefaultValueAccessor) valueAccessor: DefaultValueAccessor;

  writeValue(obj: any) {
    this.valueAccessor.writeValue(obj);
  }

  registerOnChange(fn: any) {
    this.valueAccessor.registerOnChange(fn);
  }

  registerOnTouched(fn: any) {
    this.valueAccessor.registerOnTouched(fn);
  }

  setDisabledState(isDisabled: boolean) {
    this.valueAccessor.setDisabledState(isDisabled);
  }

  constructor(public dataService: DataService) {
  }

}

html部分是这样的:

<mat-form-field fxFlex="100" >
  <input
    matInput
    formControlName="{{ name }}"
    maxlength="{{ maxlength }}"
    placeholder="{{ name | translate }}"
    required
  />
  <mat-error *ngIf="matInputSelector.errors">{{
    this.dataService.getErrorMsg(matInputSelector.errors)
  }}</mat-error>
</mat-form-field>

注意

如果我使用formControlName="{{ name }}"我可以将控件绑定到formGroup,但是,我不能使用formControl属性绑定到组件的错误部分

即:我可以使用:

1- formControl(可以控制错误部分)

要么

2-使用formControlName(绑定到外部formGroup,但无法控制错误部分)

因此,如果有人有更好的答案,请发布它以帮助每个人。

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.