how to grap input value in html component from service class in order to update a variable this service has

问题

Good Day developers, im trying to find the way to grap a value an input html tag has from my service class in the same angular class.This input is attached to an ngForm thus is linked to a model interface component in order to validate this form once is submitted.I tried to import the same model interface component in the service class in order to access it from there too, but doesn't work. This is the service:

***variable type model interface***

formSignup: signUpForm = {
    nameUser: '',
}=========>model interface component also imported to service in order to access whichever values user insert in it

***method where in the variable gets updated accesisng the model interface***

 async signUpUser(emailUser: string, passwordUser: string) {
    some code.....

  await responseOk.user.updateProfile({
     displayName:this.formSignup.nameUser});===>this is the value i want to update dynamically from the 
                                                 input value

    more code......
}

Here my html, model and component.ts components related to my issue:

HTML
    <form #submitSign='ngForm' (submit)="signUp(submitSign.value)">
      <input type="text" [(ngModel)]="formSignup.nameUser" name="nameUser" class="form-control" 
      id="nameUser"  placeholder="Name " #nameUser="ngModel"
   </form>

MODEL INTERFACE

export interface signUpForm{
  nameUser?:string,
}

COMPONENT.TS

formSignup: signUpForm = {
    nameUser:'',
    emailUser: '',
    passwordUser: '',
    confirmPasswordUser: '',
    imageUser: '',
  };


  constructor(
    private signUserUp: service){}

  ngOnInit(): void {}

  signUp(value: signUpForm) {
    this.signUserUp
      .signUpUser(value.emailUser, value.passwordUser)
      .then((response) => {

         some code.......
      })
      .catch((error) => error.messages);
}

Any idea about how to improve this ?Thanks in advance!!!

回答1:

You can do the following,

In your component.ts file,

import { NgForm } from '@angular/forms';
import { SignUserUp } from '../services/signuserup.service;

constructor(private signUserUp: SignUserUp) { }

ngOnInit() { }

signUp(form: NgForm) {
 console.log(form.value);
 this.signUserUp.signUpUser(form.value).then((res) => {  });
}

In your service.ts file,

Deconstruct the form object inside the signUpUser function to obtain username & password fields.

signUpUser(formdata) {
 console.log(formdata.emailUser, formdata.passwordUser)
}

来源：https://stackoverflow.com/questions/61931439/how-to-grap-input-value-in-html-component-from-service-class-in-order-to-update

标签

javascript

angular

angularjs-ng-form