Question

我正在使用Angular 4编辑个人资料页面，我在以下情况遇到问题：

我有这个user-profile.ts界面

export interface UserProfile {

    name:string;
    email:string;

}

现在这是我的user-profile.component.ts

import { Component, OnInit } from '@angular/core';
import {Inject} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import { ElementRef, Directive, Renderer2, Input } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Form } from '@angular/forms';
import { FormControlName } from '@angular/forms';

import { UserProfile } from './user-profile';

@Component({
  selector: 'user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.css']
})

export class UserProfileComponent implements OnInit {

profileForm:FormGroup;

up: UserProfile;

  constructor(@Inject(FormBuilder) fb: FormBuilder) {

    this.profileForm = new FormGroup({
      name : new FormControl(),
      email : new FormControl()
    });


    saveUserProfile(){

    this.up.nomeCliente = this.profileForm.value.nomeCliente;

    this.up.emailCliente = this.profileForm.value.emailCliente;


      console.log(

        'Name + Email', this.up.name + ' - ' + this.up.email


      );


  }

}

然后，最后，我的user-profile.component.html

<div class='container'>
  <form class="example-form" [formGroup]='profileForm' #pForm >

    <div class='row'>
        <mat-form-field class="example-full-width">
            <input type='text' name='name' formControlName='name'  matInput placeholder="Nome" value="Me">
        </mat-form-field>
    </div>

    <div class='row'>
      <mat-form-field class="example-full-width">
        <input type='email' matInput name='email' formControlName='email' placeholder="Email" value="me@me.com">
      </mat-form-field>
    </div>

    <button type='submit' mat-button class='btn-primary' (click)='saveUserProfile(profileForm.value)'>Salvar</button>

  </form>
</div>

这是我得到的错误：

UserProfileComponent.html:95 ERROR TypeError: Cannot set property 'name' of undefined

有人可以解释我为什么会收到此错误？我不应该在这种情况下使用我的界面吗？为什么？我错过了一个导入或什么？请记住，这是一个编辑配置文件区域，因此用户可能会在那里遇到他的数据，如果他更改并单击保存，数据将会更新。

另外，我在没有使用界面的情况下完成了它并且它可以工作。我想了解为什么在这种情况下我不能使用接口，因为它会使我的代码更清晰。

谢谢！

使用Angular 4从Forms中检索值时，使用接口返回undefined

0 个答案: