Угловое изменение отображаемого значения

Question

У меня есть вход, который получает числовое значение.Я хотел бы изменить отображение на стороне html, в основном, если переменная равна, скажем, 7, отображаемое значение становится «abcdefg» вместо 7. Наоборот, если я набираю abcdefg, я бы хотел, чтобы форма понимала, чтозначение, которое должно быть сохранено, равно 7, а не строка.Есть ли способ сделать это только на стороне HTML?

<div class="col-6">
 <mat-form-field>
  <input matInput placeholder="Cardinality Max" required #asbiepCardinalityMax
  (change)="changeMax(asbiepCardinalityMax.value)"
  (focus)="focusInMax(asbiepCardinalityMax.value)"
  [(ngModel)]="asAsbiepDetail().cardinalityMax" 
  (ngModelChange)="onChange()"
  [disabled]="!isEditable() || !asAsbiepDetail().used"
  (keypress)="numberOnly($event)">
 </mat-form-field>
</div>

Answer 1

Вы хотите отделить логику для контроллера для просмотра привязки и просмотра для контроллера.Вы хотите добавить отдельные функции для обновления и чтения.Вы можете либо добавить обработчик события, чтобы установить значение onChange, и удалить () из ngModel (удаляя обновление вида -> обновление контроллера), либо использовать методы получения и установки машинописи для привязки к одному значению с другой логикой.

Опция 1:

HTML:

<div class="col-6">
 <mat-form-field>
  <input matInput placeholder="Cardinality Max" required #asbiepCardinalityMax
  (change)="changeMax(asbiepCardinalityMax.value)"
  (focus)="focusInMax(asbiepCardinalityMax.value)"
  [ngModel]="fieldValue()" 
  (ngModelChange)="onChange()"
  (change)="setFieldValue($event)"
  [disabled]="!isEditable() || !asAsbiepDetail().used"
  (keypress)="numberOnly($event)">
 </mat-form-field>
</div>

Контроллер:

@Component({})
export class Controller {
  realValue: number = 7;

  setFieldValue($event) {
    let newValue = $event.target.value;
    //Code here to turn newValue into something correct for real value
    if (newValue == 'abcdefg') {
      realValue = 7;
    }
  }

  fieldValue(): string {
    if (realValue === 7) {
      return 'abcdefg';
    }
  };
}

Опция 2:

HTML:

<div class="col-6">
 <mat-form-field>
  <input matInput placeholder="Cardinality Max" required #asbiepCardinalityMax
  (change)="changeMax(asbiepCardinalityMax.value)"
  (focus)="focusInMax(asbiepCardinalityMax.value)"
  [(ngModel)]="fieldValue" 
  (ngModelChange)="onChange()"
  [disabled]="!isEditable() || !asAsbiepDetail().used"
  (keypress)="numberOnly($event)">
 </mat-form-field>
</div>

Контроллер:

@Component({})
export class Controller {
  realValue: number = 7;

  set FieldValue(newValue): void {
    //Code here to turn newValue into something correct for real value
    if (newValue == 'abcdefg') {
      realValue = 7;
    }
  }

  get fieldValue(): string {
    if (realValue === 7) {
      return 'abcdefg';
    }
  };
}

И тогда вы используете realValue там, где хотите.

Преимущество первого состоит в том, что вы можете выбрать, какое событие вы хотите запустить, функцию, которая устанавливает значение на контроллере - вы можете захотеть изменить, keyup, keydown, blur - вы можете иметь любой классический javascriptСобытия.Второй подход требует onChange.