Question

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

我有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），但这是正确的方法吗？

Answer 1

您可以将ngModel与getter和setter一起使用

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

在您的打字稿中为此创建吸气剂和吸气剂

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

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

您可以here

检查它

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

1 个答案: