导出输入值Angular 6

Question

在Angular6中，我有如下代码：

import { Component, OnInit } from '@angular/core'
import { FormGroup, FormBuilder} from '@angular/forms';

@Component({
    selector: 'app-form',
    templateUrl: './form.component.html',
    styleUrls: ['./form.component.scss'],
})

export class FormComponent implements OnInit {
    formulario: FormGroup

    constructor(private formBuilder: FormBuilder) {}

    ngOnInit() {
        this.formulario = this.formBuilder.group({
            pesquisa: [null],
        })
    }
    teste() {
        console.log(this.formulario.value.pesquisa)
    }
}

如何导出 "this.formulario" 以便在服务中使用它？

我正在通过 ngSubmit 捕获在输入中输入的数据，我想将其传递给 API（在服务中定义）的 url。

我是初学者，我找不到足够清晰的解决方案来理解我的理解。

Answer 1

您应该首先将 service 注入 component。这样您就可以使用 form data 作为输入从组件中调用 service method。这是将 form data 传递给服务器的推荐方法。从您的服务中，您可以提取所有表单数据并构建一个请求对象。或者您提取内部组件并将其传递给 api 调用服务。

示例代码：

@Component({
    selector: 'app-form',
    templateUrl: './form.component.html',
    styleUrls: ['./form.component.scss'],
    providers : [AppService]
})

export class FormComponent implements OnInit {
    formulario: FormGroup

    constructor(private formBuilder: FormBuilder, private _appService : AppService) {}

    ngOnInit() {
        this.formulario = this.formBuilder.group({
            pesquisa: [null],
        })
    }
    teste() {
       // You can also extract form data inside component itself and then prepare object to pass it to service
       let myData = {
         name : this.formulario.value.userName,
         firstName : this.formulario.value.firstName
       }
        this._appService.saveData(myData);
        console.log(this.formulario.value.pesquisa)
    }
}

导出输入值Angular 6

Export input value Angular 6

angular

angular6