根据其他输入字段更新输入字段答案

【问题标题】：Update an input field based on other input fields根据其他输入字段更新输入字段
【发布时间】：2019-07-20 06:28:37
【问题描述】：

我正在尝试根据我的要求创建一个示例。

我有 3 个输入字段，其中 2 个是独立的，第三个输入字段依赖于其他 2 个输入字段。

第三个输入字段也可以接受用户的自定义输入或基于 2 个独立字段的计算。

这是我创建的示例的link。

我的 HTML 是

<mat-form-field appearance="outline">
    <mat-label>A</mat-label>
    <input matInput placeholder="" [(value)]="a"
        (change)="formatedText($event)" (click)="$event.target.select()">
</mat-form-field>

<mat-form-field appearance="outline">
    <mat-label>B</mat-label>
    <input matInput placeholder="" [(value)]="b"
        (change)="formatedText($event)" (click)="$event.target.select()">
</mat-form-field>

<mat-form-field appearance="outline">
    <mat-label>(C=A+B) or (Any Number)</mat-label>
    <input matInput placeholder="" [(value)]="c"
        (change)="compute($event)" (click)="$event.target.select()">
</mat-form-field>

我的打字稿代码是

import {Component} from '@angular/core';

/**
 * @title Basic Inputs
 */
@Component({
  selector: 'input-overview-example',
  styleUrls: ['input-overview-example.css'],
  templateUrl: 'input-overview-example.html',
})
export class InputOverviewExample {
  a: string;
  b: string;
  c: string;

  constructor(){
  }

  ngOnInit(): void {
    this.a = "0";
    this.b = "0";
  }

  formatedText(event){
    event.target.value = event.target.value.split(":")[0] + " is the value";
  }

  compute(event){
    console.log(this.a,this.b);
    this.c = String(Number(this.a.split(":")[0]) + Number(this.b.split(":")[0]) ) + " is the value";
  }
}

如前所述，A 和 B 输入字段取值并显示为格式化文本。 C 值由 A 和 B 计算得出，并显示为格式化文本。如果用户覆盖值 C，则应考虑用户输入。

这里是带有格式化文本的字段

我在更新 C 字段时遇到问题。如何实现，自动计算 C 否则覆盖 C？

在formatedText() 中，我希望在更改时为新输入设置相应的值（即a 和b）。

注意：这不是我的确切要求，因此可能存在一些框架错误。但想法是更新一个字段，该字段从需要某种处理或直接接受用户输入的其他 2 个字段中获取输入。

我是 Angular 的新手，如果有人指出更好的 Angular 代码实践，我会很高兴

我的解决方案

在 HTML 中

<mat-form-field appearance="outline">
    <mat-label>A</mat-label>
    <input matInput placeholder="" [value]="a"
        (change)="formatedText($event, 'a')" (click)="$event.target.select()">
</mat-form-field>

<mat-form-field appearance="outline">
    <mat-label>B</mat-label>
    <input matInput placeholder="" [value]="b"
        (change)="formatedText($event, 'b')" (click)="$event.target.select()">
</mat-form-field>

<mat-form-field appearance="outline">
    <mat-label>(C=A+B) or (Any Number)</mat-label>
    <input matInput placeholder="" [value]="c"
        (change)="formatedText($event, 'c')" (click)="$event.target.select()">
</mat-form-field>

在打字稿中

import {Component} from '@angular/core';

@Component({
  selector: 'input-overview-example',
  styleUrls: ['input-overview-example.css'],
  templateUrl: 'input-overview-example.html',
})
export class InputOverviewExample {
  a: string;
  b: string;
  c: string;

  constructor(){
  }

  ngOnInit(): void {
    this.a = "0";
    this.b = "0";
  }

  formatedText(event, type: string){
    switch(type){
      case 'a':
        this.a = event.target.value.split(":")[0] + ": is the value";
        this.c = this.compute(this.a, this.b);
        break;
      case 'b':
        this.b = event.target.value.split(":")[0] + ": is the value";
        this.c = this.compute(this.a, this.b);
        break;
      case 'c':
        this.c = event.target.value.split(":")[0] + ": is the value";
    }
  }

  compute(a: string,b: string){
    return String(Number(this.a.split(":")[0]) + Number(this.b.split(":")[0]) ) + ": is the value";
  }
}

我能够实现我想要的 (live example)，但这是正确的角度吗？

【问题讨论】：

将代码放入问题中
stackblitz.com/edit/… .. 我在问题中添加了可能不明显
Stackoverflow 需要问题中的代码，而不是第三方网站，因为第三方网站上的代码可能会在问题仍然存在时消失。
谢谢@epascarello，我刚刚意识到我编辑了我的问题代码链接，如果我没有添加代码，我可能会丢失与理解我的问题相关的代码

标签： angular input

【解决方案1】：

您可以使用带有 getter 和 setter 的 ngModel 来实现这一点

<input [(ngModel)]="superField" />

在您的打字稿中为此创建 getter 和 setter

get superField() {
  if (this._userInput) {
    return this._userInput;
  } else {
    const calculated = this.calculateSomething();
    return calculated ? calculated : '';
  }
}

set superField(userInput) {
  this._userInput = userInput;
}

您可以查看here

【讨论】：