Gibt es eine Möglichkeit zum Erstellen einer 'Nummer' Eingabe FormControl in Angular 2 Reactive Forms

Question

Ich habe das offizielle Angular.io Tutorial auf Dynamic Forms bearbeitet, um ein Formular Steuerelement/Eingabefeld vom Typ "Nummer" hinzuzufügen.

https://plnkr.co/edit/NslBCrFZLQnLblAqcmzV

NumberQuestion Klasse

import { QuestionBase } from './question-base'; 

export class NumberQuestion extends QuestionBase<string> { 
    controlType = 'numberbox'; 
    type: string; 

    constructor(options: {} = {}) { 
    super(options); 
    this.type = options['type'] || ''; 

    } 
} 

neues NumberQuestion erstellen:

//... 
    new NumberQuestion({ 
    key: 'years', 
    label : 'Years active', 
    type : 'number', 
    order : 4 

    }) 

Vorlage:

<div [formGroup]="form"> 
    <label [attr.for]="question.key">{{question.label}}</label> 

    <div [ngSwitch]="question.controlType"> 

    <input *ngSwitchCase="'textbox'" [formControlName]="question.key" 
      [id]="question.key" [type]="question.type"> 

    <input *ngSwitchCase="'numberbox'" [formControlName]="question.key" 
      [id]="question.key" [type]="question.type"> 

    <select [id]="question.key" *ngSwitchCase="'dropdown'" [formControlName]="question.key"> 
     <option *ngFor="let opt of question.options" [value]="opt.key">{{opt.value}}</option> 
    </select> 

    </div> 

    <div class="errorMessage" *ngIf="!isValid">{{question.label}} is required</div> 
</div> 

Wenn Sie auf den Load Defaults klicken Wenn Sie auf die Schaltfläche "Speichern" klicken, werden Sie feststellen, dass das Wertobjekt des Formulars den numerischen Typ des Formulars "Jahre aktiv" enthält.

Wenn Sie jedoch zuerst in das Steuerelement "Jahre aktiv" eingeben und dann auf Speichern klicken, sehen Sie, dass der Wert in eine Zeichenfolge umgewandelt wurde.

Ich verstehe, dass das normal ist, wie hier beschrieben: https://stackoverflow.com/a/35791893/2025271

Ich mag würde wissen, ob es einen Weg gibt, Angular die Formcontrol zu instruieren Nummerntyp Eingänge als „Zahlen“ zu erhalten, beim Zugriff auf ihren Wert .

Ich weiß, dass ich dies manuell tun kann, mit parseInt(), um Wert bei Änderung zu bearbeiten, aber ich versuche zu finden, ob es eine eingebaute Möglichkeit ist, es zu tun.

Answer 1

als Alternative dynamische Lösung auf Ihre Frage:

• Sie ein Objekt erstellen kann, das wird enthält den Wert Ihrer Form i es myObject im Code genannt
• in einreichen Sie die Methode createMyObject() aufrufen, die fetchs Ihre Fragen eine nach der anderen
• prüft dann, ob seine Art der number ist:
  • wenn es sich um eine Zahl ist fügen Sie ein number Eigenschaft auf das Objekt, in dem die Schlüssel der Schlüssel der Frage und der Wert davon wird der Wert des formControl ist, fügen Sie dann die Eigenschaft myObject
  • Sie sonst eine string Eigenschaft erstellen, und fügen Sie myObject

Ts Code of DynamicFormComponent:

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

import { QuestionBase }    from './question-base'; 
import { QuestionControlService } from './question-control.service'; 

@Component({ 
    selector: 'app-dynamic-form', 
    templateUrl: './dynamic-form.component.html', 
    providers: [ QuestionControlService ] 
}) 
export class DynamicFormComponent implements OnInit { 

    @Input() questions: QuestionBase<any>[] = []; 
    form: FormGroup; 
    payLoad = ''; 
    myObject : any = {}; 

    createMyObject(){ 
    for(let question of this.questions){ 
     let key = question.key; 
     if(question.type === "number"){ 
     let tempObj : number = +this.form.value[key]; 
     this.myObject[key] = tempObj; 
     } 
     else{ 
     let tempObj : string = this.form.value[key]; 
     this.myObject[key] = tempObj; 
     } 
    } 
    } 

    constructor(private qcs: QuestionControlService) { } 

    ngOnInit() { 
    this.form = this.qcs.toFormGroup(this.questions); 
    } 

    onSubmit() { 
    this.payLoad = JSON.stringify(this.form.value); 
    this.createMyObject(); 
    } 

    load(){ 
    this.form.patchValue({"firstName":"kratos","emailAddress":"kratos@gow.com","brave":"solid","years":132}); 
    } 
} 


/* 
Copyright 2017 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that 
can be found in the LICENSE file at http://angular.io/license 
*/ 

Html-Code DynamicFormComponent:

<div> 
    <button type="button" (click)="load()">Load Defaults</button> 

    <form (ngSubmit)="onSubmit()" [formGroup]="form"> 

    <div *ngFor="let question of questions" class="form-row"> 
     <app-question [question]="question" [form]="form"></app-question> 
    </div> 

    <div class="form-row"> 
     <button type="submit" [disabled]="!form.valid">Save</button> 
    </div> 
    </form> 

    <div *ngIf="payLoad" class="form-row"> 
    <strong>Saved the following values</strong><br>{{payLoad}} 
    </div> 

    <div *ngIf="payLoad" class="form-row"> 
    <strong>Saved the following values</strong><br>{{myObject | json}} 
    </div> 
</div> 

Hope this wird :)