Question

表单的HTML

想要在tempService文件中调用函数recordTemperature并重置该服务的值。

<div class="container">
  <h1>Temperature Monitor</h1>
    <form [formGroup] = temperatureForm novalidate>

      <div>
        <label for="temperature">Add Temperature:</label>
        <input id="temperature" formControlName="temperature" type="text" required>

      <button (click)="_tempService.recordTemperature(temperatureForm.get('temperature').value);">Add</button>
        <div class="row">
          <div *ngIf="temperatureForm.controls.temperature.dirty && temperatureForm.controls.temperature.errors && temperatureForm.controls.temperature.errors.temp && temperatureForm.controls.temperature.value" class="alert alert-danger col-md-5 col-xs-12">can only contain numeric values</div>  

        </div> 
      </div>
</div>

我的组件从服务处导入TemperatorMonitor

import { Component, OnInit } from '@angular/core';
import {FormControl,FormBuilder, FormGroup, Validators} from '@angular/forms'
import {formValidator} from './formValidation.component'
import {TemperatureMonitor} from './app.temperatureMonitor.service'

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.component.html',
  styleUrls: ['app/app.component.css'],
  providers: [TemperatureMonitor]
})
export class AppComponent implements OnInit{
  temperatureForm: FormGroup;
  constructor(private fb:FormBuilder,private _tempService : TemperatureMonitor){}
  ngOnInit(){
    this.createForm();
  }
  createForm(){
    this.temperatureForm = this.fb.group({
      temperature : ['',formValidator.temperatureValidator],
    })
  }

我的服务

import {Injectable} from '@angular/core'

@Injectable()
export class TemperatureMonitor{
     recordTemperature(value){       
      this.temperatureForm.get('temperature').reset();     
    }
}

获取无法在尝试从此处重置输入数据时读取未定义错误的属性'get'。

评论是否需要更多数据或澄清。

Angular 2 ..将表单的实例或控件传递给服务

0 个答案: