如何从服务类中获取html组件中的输入值以更新此服务具有的变量 [英] how to grap input value in html component from service class in order to update a variable this service has

问题描述

Good Day开发人员，我试图找到从我的服务类中的同一个角度类中获取输入html标签所具有的值的方法.此输入附加到ngForm，因此链接到模型接口组件，以便提交后验证此表单.我试图在服务类中导入相同的模型接口组件，以便从那里也可以访问它，但是不起作用. 这是服务:

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......
}

以下是与我的问题相关的html，model和component.ts组件:

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!!!

推荐答案

您可以执行以下操作，

在您的component.ts文件中，

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) => {  });
}

在您的service.ts文件中，

In your service.ts file,

在signUpUser函数中解构表单对象以获得用户名&密码字段.

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

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

这篇关于如何从服务类中获取html组件中的输入值以更新此服务具有的变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！