帶有updateOn模糊的Angular自定義FormControl

我有一個反應式表單組，它與 updateOn submit和 updateOn change一起作業得很好。

但是當我切換到 updateOn blur 時，在我的自定義表單控制元件中輸入一個字符后會直接觸發所需的錯誤并且永遠不會消失。此外，當我提交表單時，我的自定義表單控制元件的所有值都是空的（即使欄位已完成）。

我的表格 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 之一）：

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 之一）：

<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 一起使用？

uj5u.com熱心網友回復：

您實際上錯過了模糊事件。似乎您的代碼中有很多噪音，例如不知道是為了什么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 函式中洗掉，否則您的錯誤將在鍵入時立即顯示，因為該欄位被觸摸并且您對模糊進行了更新，這意味著該值在模糊事件發生之前不會更改。

這是一個DEMO供您參考

您也可以查看以下文章，以免在實作 ControlValueAccessor 時重新發明輪子

標籤：有角的 打字稿 角反应形式 角形 控制值访问器

上一篇：當陣列為空時，TypeScript不做型別檢查

下一篇：有人知道如何輸入useRef嗎？