Нулевое значение ngForm в пользовательском вводителе номеров - PullRequest
Новая
       61

Нулевое значение ngForm в пользовательском вводителе номеров

0 голосов
/ 21 февраля 2020

У меня проблема

  • На стороне сервера PHP, API возвращает json, где некоторые элементы имеют нулевые значения. Я использую JSON_NUMERIC_CHECK на стороне PHP.

  • На angular стороне: 

<app-number-picker name="scoreEq1" [(ngModel)]="match.scoreEq1" #score="ngModel"></app-number-picker>

Затем я должен настроить средство выбора номера компонент: 

<div class="input-group mb-3 input-md">
  <div class="input-group-prepend">
    <span class="input-group-text decrease" (click)="decrease();">-</span></div>
  <input [name]="name" [(ngModel)]="value" class="form-control counter" type="number" step="1">
  <div class="input-group-prepend">
    <span class="input-group-text increase" (click)="increase();" style="border-left: 0px;">+</span></div>
</div>

Мой код основан на blog.thoughtram.io В компоненте ts: 

import { Component, Input, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-number-picker',
  templateUrl: './numberPicker.component.html',
  styleUrls: ['./numberPicker.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => NumberPickerComponent),
      multi: true
    }
  ]
})
export class NumberPickerComponent implements ControlValueAccessor {

  @Input()
  name: string;
  @Input() val: number;
  // Both onChange and onTouched are functions
  onChange: any = () => { };
  onTouched: any = () => { };

  get value() {
    return this.val;
  }

  set value(val) {
    this.val = val;
    this.onChange(val);
    this.onTouched();
  }
  // We implement this method to keep a reference to the onChange
  // callback function passed by the forms API
  registerOnChange(fn) {
    this.onChange = fn;
  }
  // We implement this method to keep a reference to the onTouched
  // callback function passed by the forms API
  registerOnTouched(fn) {
    this.onTouched = fn;
  }
  // This is a basic setter that the forms API is going to use
  writeValue(value) {
    if (value) {
      this.value = value;
    }
  }

  decrease() {
    if (this.value === 0 || this.value === null) {
      this.value = null;
    } else {
      this.value--;
    }
  }

  increase() {
    if (isNaN(this.value) || this.value === null) {
      this.value = 0;
    } else {
      this.value++;
    }
  }

}
  • Моя проблема, когда match.scoreEq1 = 0 => Это значение НЕ отображается на моем входе => оно остается пустым! Кажется "неопределенным", когда есть нулевое значение.

Примечание: match.scoreEq1 может быть нулевым => Я хочу отображать пустым в этом случае

В чем проблема? ngModel? ControlValueAccessor?

1 Ответ

0 голосов
/ 21 февраля 2020

Полагаю, это потому, что в вашем методе writeValue(value) вы проверяете if(value), но если ваше значение равно 0, это на самом деле оценивается как ложное, и значение вашего компонента никогда не устанавливается. Просто замените оператор if следующим образом: 

writeValue(value) {
   if (value !== null && value !== undefined) {
     this.value = value;
   }
}
...