Kann ich ein Objekt an eine reaktive Form senden?

Question

würde ich fragen, ob es möglich ist, ein ganzes Objekt in die reaktive Form in Winkel 2.

Dies ist meine Form zu senden:

sollte

this.parameterForm = this.fb.group({ 

    'name': ['', Validators.required], 
    'description': "", 
    'parameterType':'' 
}); 

Das dritte Attribut (Parametertype) ein Objekt sein, . (Der Name und die Beschreibung sind nur blanke Saiten

Mein HTML für die Parametertype ist (formControlName verwendet wird, abzubilden.):

<label for="parameterType">Parameter Type</label> 
<select id="parameterType" class="form-control" formControlName="parameterType"> 
    <option *ngFor="let parameterType of parameterTypes" [value]="parameterType"> 
    {{parameterType.name}} 
    </option> 

</select> 

Die Werte in der Auswahl sind Objekte (die an anderer Stelle erstellt werden). wenn Sie das Formular absenden, würde Ich mag das Parametertype Objekt haben das einreichen versucht, die Form zu einem Parameter namens Objekt zu analysieren.

export class Parameter { 

    public id: number; 
    public name: string; 
    public description: string; 

    public parameterType? : ParameterType 
} 

Aber wenn im Versuch, das Ergebnis in der Konsole zu lesen, die Parametertype enthält nur eine Zeichenfolge "[Object object]", Der ParameterType ist nur ein String und beim Übergeben des Formulars wird das Objekt in eine einfache Zeichenfolge konvertiert.

Meine Funktion besteht, erfolgt wie folgt aus:

onSubmit({parameter}:{parameter: Parameter}) { 
    console.log(parameter); 
    } 

Jetzt im tut es einfach so, dass in den im Parametertype-ID zu senden und über einen Dienst bekomme ich das Objekt aber diese Lösung ist nicht sehr schön. Weißt du, wie ich das Objekt an das Formular weitergeben könnte?

Dank

Answer 1

Ich glaube, du [ngValue] anstelle von [Wert] verwenden müssen.

Answer 2

Sie haben mehrere Möglichkeiten:

Lassen Sie uns sagen, dass ich die folgende Form haben:

user: FormGroup; 

this.user = this.formBuilder.group({ 
    account: this.formBuilder.group({ 
    email: ['', [Validators.required, Validators.pattern(EmailRegex)]], 
    password: ['', Validators.required], 
    passwordConfirm: ['', Validators.required] 
    }, { validator: this.matchingPasswords('password', 'passwordConfirm') }) 
}); 

Von dort können Sie Werte des Formulars mit einem Object einstellen:

let user: SignUp = { 
    account: { 
    email: this.mail, 
    password: '', 
    passwordConfirm: '' 
    } 
}; 
this.user.setValue(user); 

Wo Signup ist eine Schnittstelle:

export interface SignUp { 
    account: { 
    email: string; 
    password: string; 
    passwordConfirm: string; 
    } 
} 

Sie können auf diese Weise ein neues Object aus dem Formular erstellen:

let jsonResult = { 
    email: this.user.value.account.email, 
    password: this.user.value.account.password 
}; 

oder das Formular als ein Objekt aus einer Schnittstelle (mit @Output zum Beispiel):

@Output() randomOutput= new EventEmitter<SignUp>(); 

let data: SignUp = Object.assign({}, this.user.value); 

this.randomOutput.emit(data);