代码之家 › 专栏 › 技术社区 › anhtv13

角度6反应式窗体映射对象

angular6 angular

0

anhtv13 · 技术社区 · 6 年前

我想从被动形式映射英雄对象的值,但它不起作用。

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 是空的。我不明白为什么值不能从窗体映射到我的对象。

我怎样才能解决这个问题?

1 回复 | 直到 4 年前

1

2

Eliseo 6 年前

你的函数addHero应该是

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

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

一个是“hero data”(你的变量hero),另一个是“hero form”你的变量“myForm”