Angular 2 ngModel конвертировать из строки в объект

Question

У меня есть сущность машинописи, которую я хочу показать в форме:

class Data {
    constructor(public message: string, public properties: Object) {

    }
}

Примером этого будет

{
    message: "Hello",
    properties:{
        a: 2,
        b: 3    
    }
}

Я хочу показать properties в компоненте ввода в виде строки "a=2;b=3" и проанализировать пользовательский ввод этого поля для объекта, и у меня уже есть логика, чтобы сделать это.

Есть ли какой-то способ чтения / преобразования / изменения сущности в форме, без необходимости создавать дополнительную сущность со свойствами, определенными как строка, только для того, чтобы выполнить преобразование отдельно?

Для его показа я знаю, что могу использовать каналы, но как насчет преобразования ввода пользователя обратно в объект? properties?

Answer 1

Почему бы вам не использовать входные данные для всех изменяемых полей с двусторонним связыванием (даже созданным динамически) и собирать строку на лету при изменении любого поля?

Например, вот так: Компонент.html:

<div>
    <label for="message">message:</label>
    <input [(ngModel)]="model.message" id="message" (input)="computeProps()" />
    <br/>

    <label for="propertyes_a">properties.a:</label>
    <input [(ngModel)]="model.properties.a" id="propertyes_a" (input)="computeProps()" />
    <br/>

    <label for="propertyes_a">properties.b:</label>
    <input [(ngModel)]="model.properties.b" id="propertyes_b" (input)="computeProps()" />
    <br/>

    <span>The object's current values:</span>
    <pre>
    {{ model | json }}
  </pre>
    <span>Computed properties:</span><br/>
    <span>{{ computedProps }}</span>
</div>

Компонент.ts:

import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    model = { message: 'Hello', properties: { a: 2, b: 3 } };
    computedProps = '';

    ngOnInit() {
        this.computeProps(); // set initial value on load
    }

    computeProps() {
        this.computedProps = `a=${this.model.properties.a};b=${this.model.properties.b}`;
    }
}

Также вам необходимо импортировать FormsModule в модуль:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }