反应形式：使用 angular 4 在服务中注入形式值

Question

我想在服务中使用两个表单值。
但我没有得到 method/syntax 在服务中注入值，在其他组件中给出它们。
这是我的表单代码：

form.component.ts

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;

    }

}

form.component.html

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

我想在此服务中注入值 'name' 和 'url'：

service.ts

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

@Injectable()
export class AddwmslayerService {


  addlayer = {

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

  };

  constructor() { }

}

非常感谢您提出的每一个可能的解决方案。
非常感谢！

Answer 1

您可以在服务中创建一个设置方法，然后在提交表单后调用它。但是您必须在 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);
}
...

反应形式：使用 angular 4 在服务中注入形式值

reactive forms: inject form-values in service with angular 4

angular

angular-reactive-forms