角度创建输入组件可重用

DnA 发表于 Dev

脱氧核糖核酸

我正在使用验证器创建可重用的文本组件

export class CompInputComponent implements OnInit{
  @Input() controlFormGroup: FormGroup;
  @Input() controlLabel: string;
  @Input() controlPlaceHolder: string;
  @Input() controlName: string;
  @Input() errorMessage: string;
  private _isRequired = false;

  @Input()
  get isRequired(): boolean {
    return this._isRequired;
  }
  set isRequired(val: boolean) {
    this._isRequired = coerceBooleanProperty(val);
  }

  @Output() onComponentReady: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();
  
  constructor(private fb: FormBuilder) { }
  
  ngOnInit(){
    console.log(this.isRequired);
    if(this.isRequired){
      console.log(this.isRequired);

      this.controlFormGroup.addControl(this.controlName, new FormControl('', Validators.required));
    }else{
      this.controlFormGroup.addControl(this.controlName, new FormControl(''));
    }

    this.onComponentReady.emit(this.controlFormGroup);
  }
}

<div [formGroup]="controlFormGroup">
    <mat-form-field appearance="outline">
        <mat-label>{{controlLabel}}</mat-label>
        <input matInput [placeholder]="controlPlaceHolder" [formControlName]="controlName" />
        <mat-error *ngIf="controlFormGroup.controls.controlName.hasError('required')">">
            <span [innerHTML]="errorMessage"></span>
        </mat-error>
    </mat-form-field>
</div>

我的问题是我无法设置错误垫。我有以下错误：

core.js：5967错误TypeError：无法读取CompInputComponent_Template上未定义的属性“ hasError”

控件的名称并不难，但也很动态

内蒂希尔

这应该起作用，您正在动态创建表单控件，这意味着它们在开始时就不存在。您需要检查是否创建了表单控件。

   export class CompInputComponent implements OnInit{
      @Input() controlFormGroup: FormGroup;
      @Input() controlLabel: string;
      @Input() controlPlaceHolder: string;
      @Input() controlName: string;
      @Input() errorMessage: string;
      private _isRequired = false;
    
      @Input()
      get isRequired(): boolean {
        return this._isRequired;
      }
      set isRequired(val: boolean) {
        this._isRequired = coerceBooleanProperty(val);
      }
    
      @Output() onComponentReady: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();
      
      constructor(private fb: FormBuilder) { }
      
      ngOnInit(){
        console.log(this.isRequired);
        if(this.isRequired){
          console.log(this.isRequired);
    
          this.controlFormGroup.addControl(this.controlName, new FormControl('', Validators.required));
        }else{
          this.controlFormGroup.addControl(this.controlName, new FormControl(''));
        }
    
        this.onComponentReady.emit(this.controlFormGroup);
      }
    }
    
    <div [formGroup]="controlFormGroup">
        <mat-form-field appearance="outline">
            <mat-label>{{controlLabel}}</mat-label>
            <input matInput [placeholder]="controlPlaceHolder" [formControlName]="controlName" />
            <mat-error *ngIf="!!controlFormGroup.controls.controlName && controlFormGroup.controls.controlName.hasError('required')">">
                <span [innerHTML]="errorMessage"></span>
            </mat-error>
        </mat-form-field>
    </div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。