Me gustaría preguntar si es posible enviar un objeto completo a la forma reactiva en angular 2.
Este es mi formulario:
this.parameterForm = this.fb.group({ 'name': ['', Validators.required], 'description': "", 'parameterType':'' });El tercer atributo (parameterType) debe ser un objeto. (El nombre y la descripción son solo cadenas simples.
Mi HTML para el tipo de parámetro es (formControlName se usa para mapearlo):
<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>Los valores en la selección son objetos (que se crean en otro lugar). Al enviar el formulario, me gustaría tener el objeto de tipo de parámetro. El envío está tratando de analizar el formulario en un objeto llamado Parámetro:
export class Parameter { public id: number; public name: string; public description: string; public parameterType? : ParameterType }Pero cuando intento leer el resultado en la consola, el tipo de parámetro contiene solo una cadena "[objeto de objeto]", que parece que el tipo de parámetro es solo una cadena y al enviar el formulario, el objeto se convierte en una cadena simple.
Mi función de envío es así:
onSubmit( {parameter}:{parameter: Parameter} ) { console.log(parameter); }Ahora solo lo estoy haciendo, que en el tipo de parámetro estoy enviando la identificación y, a través de un servicio, obtengo el objeto, pero esta solución no es muy buena. ¿Conoces alguna forma en que pueda pasar el objeto al formulario?
Gracias
Creo que necesitas usar [ngValue] en lugar de [value].
Tienes varias opciones:
Digamos que tengo el siguiente formulario:
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') }) }); A partir de ahí, puede establecer valores de su formulario con un Object :
let user: SignUp = { account: { email: this.mail, password: '', passwordConfirm: '' } }; this.user.setValue(user); Donde Signup es una interfaz:
export interface SignUp { account: { email: string; password: string; passwordConfirm: string; } } De esta manera puede crear un nuevo Object desde su formulario:
let jsonResult = { email: this.user.value.account.email, password: this.user.value.account.password }; o use el formulario como un Objeto desde una interfaz (con @Output por ejemplo):
@Output() randomOutput= new EventEmitter<SignUp>(); let data: SignUp = Object.assign({}, this.user.value); this.randomOutput.emit(data);