带有FormControl模糊的角自定义updateOn

Question

我有一个反应性表单组，它可以很好地处理updateOn、、submit、和updateOn change。

但是，当我切换到updateOn 时，所需的错误将在我的自定义窗体控件中输入一个字符后直接触发，并且永远不会消失。而且，当我提交我的表单时，我的自定义表单控件的所有值都是空的(即使fiels已经完成)。

My form TS:

activityForm = this.fb.group({
    placeName: ['', { validators: [Validators.required, Validators.maxLength(75)] }],
    description: ['', { validators: [Validators.required, Validators.minLength(25), Validators.maxLength(2000)] }],
  }, { updateOn: 'blur' })

我的表单HTML:

<form class="container" [formGroup]="activityForm" (ngSubmit)="onSubmit()">

    <div class="container__field">
        <p class="container__title">{{'poi.place_name' | transloco}}</p>
        <custom-input formControlName="placeName" placeholder="{{'poi.select_place_name' | transloco}}" [error]="activityForm.get('placeName')?.errors !== null && activityForm.get('placeName')!.touched"></custom-input>
        <custom-error [text]="'error.required' | transloco" *ngIf="activityForm.get('placeName')?.hasError('required') && activityForm.get('placeName')?.touched"></custom-error>
        <custom-error [text]="'error.maxlength' | transloco : { charact : this.activityForm.get('placeName')?.errors?.maxlength.requiredLength }" *ngIf="activityForm.get('placeName')?.hasError('maxlength')"></custom-error>
    </div>

    <div class="container__field">
        <p class="container__title">{{'poi.description' | transloco}}</p>
        <custom-textarea formControlName="description" placeholder="{{'poi.select_description' | transloco}}" [limit]="2000" [error]="activityForm.get('description')?.errors !== null && activityForm.get('description')!.touched"></custom-textarea>
        <custom-error [text]="'error.required' | transloco" *ngIf="activityForm.get('description')?.hasError('required') && activityForm.get('description')?.touched"></custom-error>
        <custom-error [text]="'error.maxlength' | transloco : { charact : this.activityForm.get('description')?.errors?.maxlength.requiredLength }" *ngIf="activityForm.get('description')?.hasError('maxlength')"></custom-error>
        <custom-error [text]="'error.minlength' | transloco : { charact : this.activityForm.get('description')?.errors?.minlength.requiredLength }" *ngIf="activityForm.get('description')?.hasError('minlength')"></custom-error>
    </div>

    <div class="container__button">
        <custom-button text="{{'poi.next_step' | transloco}}" color="primary" type="submit"></custom-button>
    </div>
</form>

自定义FormControl TS ( textarea 1)：

export class CustomTextareaComponent implements ControlValueAccessor {

  @Input() placeholder = '' // give a transloco string directly
  @Input() limit = 500
  @Input() error: boolean = false

  value: string | null = null
  currentNumberOfCharacters: number = 0
  isActive: boolean | undefined

  onChange: any = () => { }
  onTouch: any = () => { }
  touched = false
  disabled = false
  
  changes(event: Event) {
    if (this.disabled) return
    this.markAsTouched()
    this.value = event?.target ? (event?.target as HTMLTextAreaElement).value : ''
    this.currentNumberOfCharacters = this.value.length
    this.onChange(this.value)
  }


  /* Methods needed by ControlValueAccessor to transform this component into a "form friendly" component */

  registerOnChange(providedFunction: any) {
    this.onChange = providedFunction
  }

  registerOnTouched(providedFunction: any) {
    this.onTouch = providedFunction
  }

  writeValue(providedValue: any) {
    if (providedValue) {
      this.value = providedValue
      this.currentNumberOfCharacters = providedValue.length
    }
  }

  setDisabledState(providedDisabledVal: any) {
    this.disabled = providedDisabledVal
  }

  markAsTouched() {
    if (!this.touched) {
      this.onTouch()
      this.touched = true
    }
  }

}

自定义FormControl HTML ( textarea 1)：

<div class="plnd-textarea">
    <div class="plnd-textarea__field-container" [class.plnd-textarea__field-container--written]="value" [class.plnd-textarea__field-container--active]="isActive" [class.plnd-textarea__field-container--error]="error">
        <textarea [placeholder]="placeholder | transloco" [value]="value" (keyup)="changes($event)" (focus)="isActive=true" (focusout)="isActive=false" [maxLength]="limit" class="plnd-textarea__field"></textarea>
    </div>
    <p class="plnd-textarea__characters">{{ currentNumberOfCharacters }}/{{ limit }} {{ 'common.characters' | transloco }}</p>
</div>

因此，我的问题是:如何使updateOn 模糊与自定义FormControl一起工作？

Answer 1

你实际上错过了模糊事件。代码中似乎也有很多杂音，不知道active是用来做什么的。以下是一个经过清理的版本：

模板：

<textarea [value]="value" (blur)="onBlur()" (keyup)="changes($event)"></textarea>

和TS：

value: string | null = null;
onChange: any = () => {};
onTouch: any = () => {};
disabled = false;

changes(event: Event) {
  if (this.disabled) return;
  this.value = event?.target
  ? (event?.target as HTMLTextAreaElement).value
  : '';
  this.onChange(this.value);
}

onBlur() {
  this.onTouch();
}
registerOnChange(providedFunction: any) {
  this.onChange = providedFunction;
}

registerOnTouched(providedFunction: any) {
  this.onTouch = providedFunction;
}

writeValue(providedValue: any) {
  this.value = providedValue;
}

setDisabledState(providedDisabledVal: any) {
  this.disabled = providedDisabledVal;
}

此外，您还需要从markAsTouched()函数中删除onChange，因为否则键入时会立即显示错误，因为字段被触及，并且您已经更新了模糊，这意味着在发生模糊事件之前，值不会更改。

这里有一个演示供您参考

此外，您还可以查看下面的文章，而不是在实现ControlValueAccessor时重新发明轮子