1

les comento, mi problema es que necesito hacer que el valor de un input sea editado tal que el valor inicial sea "nombre apellido" y el final sea "Nombre Apellido", y se me ocurrió encararlo por el lado de los pipes pero no logro dar con la forma ( ya probe con css antes y no me funcionó ).

El siguiente es mi formbuilder:

this.checkoutForm = this.formBuilder.group({
      name: [this.currentuser.ClienteNombre, Validators.required],
      phone: [this.currentuser.ClienteTelefono, Validators.required],
      email: [this.currentuser.ClienteMail, [Validators.required, Validators.email]],
      address: [this.currentuser.ClienteDireccion, Validators.required],
      nombreEmpresa: [this.currentuser.NombreEmpresa],// Validators.required],
      rut: [this.currentuser.ClienteRut],// Validators.required],
      billingAddress: [this.currentuser.BillingAdress],// Validators.required,
    });

Si saben de alguna función que ya venga con angular para este tipo de cosas o algo comentenlo por favor, sería de gran ayuda. Desde ya gracias por el tiempo que se tomaron en leer mi pregunta. Saludos.

1
  • Puedes obtener los valores del formGroup, editarlos y volverlos a setear en el formulario Commented el 11 dic. 2020 a las 14:47

1 respuesta 1

0

Es posible hacerlo agregando el pipe a app.module o el modulo que estes usando (shared, pipes, etc).


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

import { ProfileEditorComponent } from "./profile-editor/profile-editor.component";

// ESTA IMPORTACIÓN ES IMPORTANTE
import { TitleCasePipe } from "@angular/common";

@NgModule({
  declarations: [AppComponent, ProfileEditorComponent],
  imports: [
    BrowserModule,
    // other imports ...
    ReactiveFormsModule
  ],
  // LO AGREGAMOS EN EL PROVIDER. 
  providers: [TitleCasePipe],
  bootstrap: [AppComponent]
})
export class AppModule {}

Te suscribes a los cambios de tu form control e inyectas el pipe en el constructor:

 ngOnInit() {
    let firstName = this.profileForm.get("firstName");
    firstName.valueChanges.subscribe(valor => {
      this.profileForm.patchValue(
        {
          // Actualizamos solo la propiedad que nos interesa. 
          firstName: this.titleCase.transform(valor)
        },
        // Esta linea es importante para que no de un error de
        // exceed call stack size.
        { onlySelf: true, emitEvent: false }
      );
    });
  }

Ejemplo funcional aqui

Editando..

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.