角度变化显示值答案

【问题标题】：Angular change displayed value角度变化显示值
【发布时间】：2023-04-09 01:39:01
【问题描述】：

我有一个检索数值的输入。我想更改 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>

【问题讨论】：

你能澄清你的问题吗？你想显示你的字符串的长度吗？
angular.io/api/forms/ControlValueAccessor ?
我有一个包含特定输入的表单。此输入返回一个数值。我想允许一个字符串值而不是数值。基本上所有数字都将按原样显示，但我想显示为“abc”的 7 除外。显然，如果我输入 abc，我想存储的值是 7 而不是 abc。

标签： html angular forms input

【解决方案1】：

你想分离出控制器视图绑定和视图到控制器的逻辑。您想为更新和阅读添加单独的功能。您可以添加一个事件处理程序来设置值 onChange 并从 ngModel 中删除 ()（删除视图 -> 控制器更新），或者使用 typescript getter 和 setter 以不同的逻辑绑定到一个值。

选项 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、模糊 - 您可以拥有任何经典的 javascript 事件。第二种方法需要 onChange。

【讨论】：