Экспорт входного значения Angular 6

В Angular 6 у меня есть следующий код:

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, и я хочу передать их URL-адресу API (который определен в службе).

Я новичок и не нахожу решения достаточно понятные для моего понимания.


angular angular6
person Bruno Sousa    schedule 06.06.2018    source источник
comment
в Angular компоненты должны внедрять сервисы. Таким образом, вы можете вызвать службу, передающую вашу форму при отправке: onSubmit() { this.myService.method(this.formulario); }   -  person Leo Caseiro    schedule 07.06.2018
comment
см. angular.io/guide/   -  person Leo Caseiro    schedule 07.06.2018
comment
Возможный дубликат Как отправить форму на сервер в Angular2   -  person callback    schedule 07.06.2018

Ответы (1)


arrow_upward
1
arrow_downward

Сначала вы должны ввести service внутрь component. Чтобы вы могли вызывать свой service method из компонента с вашим form data в качестве входных данных. Это рекомендуемый способ передачи 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)
    }
}
person Amit Chigadani    schedule 07.06.2018