Обновить поле ввода на основе других полей ввода

Question

Я пытаюсь создать пример на основе моих требований.

У меня есть 3 поля ввода, из которых 2 являются независимыми, а третье поле ввода зависит от других 2 полей ввода.

третье поле ввода также может принимать пользовательский ввод от пользователя или вычислять на основе 2 независимых полей.

Вот ссылка на пример, который я создал.

Мой 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";
  }
}

Я могу добиться того, чего хочу ( живой пример ), но это правильный способ сделать вугловой.

Answer 1

Вы можете достичь этого, используя ngModel с геттером и сеттером

<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;
}

Вы можете проверить это здесь