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

最后都变了- 提交于 2020-05-28 09:28:20

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!