2017-08-02 21 views
0

サービスで2つのフォーム値を使用したい。
しかし、私はメソッド/構文を他のコンポーネントでそれらを与えるために、サービス内の値を注入するために取得しませんでした。ここ
は自分のフォームのコードです:反応型:角度4のサービスでフォーム値を挿入

form.component.ts

<form [formGroup]='rForm' (ngSubmit)="addPost(rForm.value)"> 

    <label> 
    <input type="text" formControlName="name"> 
    </label> 

    <label> 
     <input type="text" formControlName="url"> 
    </label> 

    <input type="submit" class="button expanded" value="Submit Form"> 

</form> 


と私は注入したいform.component.html

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

@Component({ 
    selector: 'app-formurl', 
    templateUrl: './formurl.component.html', 
    styleUrls: ['./formurl.component.css'] 
}) 
export class FormurlComponent { 

    rForm: FormGroup; 
    post: any;   // property: weitergeben an Service 
    url: string = ''; 
    name: string = ''; 


    constructor(private fb: FormBuilder) { 

    this.rForm = fb.group({ 
     'name': [''], 
     'url': [''] 
    }); 

    } 


    addPost(post) { 

    this.name = post.name; 
    this.url = post.url; 

    } 

} 

このサービスで 'name'と 'url'の値:

service.ts

import { Injectable } from '@angular/core'; 

@Injectable() 
export class AddwmslayerService { 


    addlayer = { 

    addlayername: ??????????????? , 
    addlayerurl: ??????????????????, 

    }; 

    constructor() { } 

} 

は、すべての提案潜在的な解決策いただき、誠にありがとうございます。
本当にありがとう!

答えて

0

サービスでsetメソッドを作成してから、フォームが送信された後で呼び出すことができます。しかし、app.module.tsにサービスを提供する必要があります。

service.ts

import { Injectable } from '@angular/core'; 

@Injectable() 
export class AddwmslayerService { 


    addlayer = { 

    addlayername: '', 
    addlayerurl: '', 

    }; 

    constructor() { } 

    setLayer(name: string, url: string) { 
    this.addlayer.addlayername = name; 
    this.addlayer.addlayerurl = url; 
    } 

} 

form.component.ts

... 
constructor(private fb: FormBuilder, private addLayerService: AddwmslayerService) { 

    this.rForm = fb.group({ 
     'name': [''], 
     'url': [''] 
    }); 

} 


addPost(post) { 

    this.name = post.name; 
    this.url = post.url; 

    this.addLayerService.setLayer(this.name, this.url); 
} 
... 
+0

あなたの答えをありがとう。しかし、私はform.component.tsの最後の行を処理する方法を理解していませんでした。私は 'this.AddwmslayerService.setLayer()'からエラーを受け取ります。私はapp.moduleにサービスを提供しました。 – Steffn

+0

form.component.tsのコンストラクタに依存関係 'private addLayerService:AddwmslayerService'を追加しましたか? –

+0

ありがとう、今働いている;)ちょうど関心がない:あなたは両方の値をサービスなしでコンポーネントに直接注入する方法を知っていますか?それは素晴らしい解決策にもなります。 – Steffn

関連する問題