Angular 6：无法读取未定义的属性“重置”

Question

在我的方法中使用reset时出现错误。保存更改后，我尝试重置表单，但是我收到此错误：

这是我的方法：

  @ViewChild('editFrom')
  editForm: NgForm;
  constructor(
    private route: ActivatedRoute,
    private alertify: AlertifyService
  ) {}

  ngOnInit() {

  }
  updateUser() {
    console.log(this.user);
    this.alertify.success('Profile Updated Successfully');
    this.editForm.reset(this.user);
  }
}

此HTML格式：

<form #editForm="ngForm" id="editForm" (ngSubmit)="updateUser()">
              <h4>Description</h4>
              <textarea name="introduction" rows="6" class="form-control" [(ngModel)]="user.introduction"></textarea>
              <h4>Looking For</h4>
              <textarea name="lookingFor" rows="6" class="form-control" [(ngModel)]="user.lookingFor"></textarea>
              <h4>Interest </h4>
              <textarea name="interests" rows="6" class="form-control" [(ngModel)]="user.interest"></textarea>
              <h4>Location Details:</h4>
              <div class="form-inline">
                <label for="city">City:</label>
                <input class="form-control" type="text" name="city" [(ngModel)]="user.city">
                <label for="country">Country:</label>
                <input class="form-control" type="text" name="country" [(ngModel)]="user.country">
              </div>
            </form>

Answer 1

问题是您在HTML文件中使用了<form #editForm="ngForm" id="editForm" (ngSubmit)="updateUser()">

您正在使用@ViewChild('editFrom')到.ts文件，它应该是@ViewChild('editForm')

Answer 2

我真的不认为您需要使用<li id="p02" ... data-seen-2="yes"><a href="#">02</a></li> 来持有ViewChild。由于您可以将其作为参数传递给editForm方法。

将表单传递给方法：

updateUser

然后通过<form #editForm="ngForm" id="editForm" (ngSubmit)="updateUser(editForm)"> 方法接收它：

updateUser

Answer 3

如果您使用viewChild来保存变量，则问题出在这里：

@ViewChild('captchaRef') recaptchaRef: **ElementRef**;  

请勿使用 ElementRef 引用变量；

在ts.file中执行=>

import {RecaptchaComponent} from 'ng-recaptcha';  
@ViewChild('captchaRef') recaptchaRef: RecaptchaComponent;

this.recaptchaRef.reset();