Question

我是Angular 6的新手，我想从Reactive表单中映射英雄对象的值，但是它不起作用。

这是我的hero-add.component.ts：

import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../Hero';
import { HeroService } from '../hero.service';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from 
'@angular/forms';

@Component({
selector: 'app-hero-add',
templateUrl: './hero-add.component.html',
styleUrls: ['./hero-add.component.css']
})
export class HeroAddComponent implements OnInit {

hero: Hero = new Hero();

myForm = new FormGroup({}) // Instantiating our form

get f() { return this.myForm.controls; }

// constructor(private heroService: HeroService, private router: Router) { 
constructor(private heroService: HeroService, private router: Router, 
private formBuilder: FormBuilder) {
this.myForm = formBuilder.group({
  publishedYear: [this.hero.Name, [Validators.required, 
Validators.min(1990), Validators.max(2018)]],//I expect this will map value of name from form to my this.hero.Name
  name: [this.hero.PublishedYear, [Validators.required, 
Validators.minLength(2)]] //I expect this will map value of publishedDate from form to my this.hero.Published
});
}

ngOnInit() {
}

addHero() {
    var hr = this.hero;//hr= Hero {} because this.hero = Hero{} 
  }
}

这是我的hero-add.component.html：

<div>

<form [formGroup]="myForm">
<div class="name">
  <label for="name">Name: </label>
  <input type="text" id="Name" formControlName="name">
  <p class="alert alert-danger invalid" *ngIf="f.name.errors">Invalid 
Name</p>
</div>

<div class="publishedYear">
  <label for="publishedYear">Publish Year: </label>
  <input type="number" id="PublishedYear" formControlName="publishedYear">
  <p class="alert alert-danger invalid" 
*ngIf="f.publishedYear.errors">Invalid Published Year</p>
</div>
</form>

<div class="complete">
<label>Complete</label>
<input type="radio" id="Complete" name="Complete" 
[(ngModel)]="hero.Complete" value="true">Yes
<input type="radio" id="Complete" name="Complete" 
[(ngModel)]="hero.Complete" value="false">No
</div>

<button (click)='addHero()'>Add new</button>
</div>

我输入了字段名称和发布的年份，然后单击“添加英雄”按钮转到功能addHero（）。我在此函数中设置了一个断点，this.Hero的值为空。我不明白为什么值不能从表单映射到我的对象。

这里有人可以解决问题吗？谢谢你。

Answer 1

您的功能addHero必须像

addHero()
{
  if (this.myform.valid)
  {
      var hr=this.myForm.value;
  }
}

甚至更好的是，您更改.html并将变量形式传递给

<button (click)='addHero(myForm)'>Add new</button>
//And addHero receive as argument
addHero(form)
{
  if (form.valid)
  {
      var hr=form.value;
  }
}

一件事是“英雄数据”（您的变量英雄），另一件事是“英雄形式”您的变量“ myForm”

Angular 6反应形式映射对象

1 个答案: