Angular 2，从firebase填充表单后无法验证表单

Question

我有一个 EditAssignment 表单，我需要用数据库中的现有值填充它，然后验证表单。首先，我像这样从 firebase 检索表单值。

 this.assignment = this._db.object('/assignments-detail/' + asnDetailKey);

然后我将表单值存储在类变量（_assignment）中。

 this.assignment.subscribe(asnDetails => {
  this._assignment = asnDetails;
});

然后我像这样使用 _assignment 填充表单。

 <form [formGroup]="form">
   <div class="form-group">
      <label for="subject">Assignment Subject</label>
      <input type="text" class="form-control" id="subject" formControlName="subject" [value]="_assignment?.subject">
    <div class="alert alert-danger" *ngIf="form.controls['subject'].touched && form.controls['subject'].hasError('required')">
      Please enter assignment subject.
    </div>
  </div>
  <div class="form-group">
     <label for="dueDate">Due Date</label>
     <input type="date" class="form-control" required="required" id="dueDate" formControlName="dueDate" [min]="today" [value]="_assignment?.dueDate">
   <div class="alert alert-danger" *ngIf="form.controls['dueDate'].touched && form.controls['dueDate'].value==' | async'">
     Please enter a valid due date.
   </div>
  </div>
   <button type="button" class="btn btn-primary" (click)="onUpdate()" [disabled]="!form.valid">Edit Assignment</button>
 </form>

最后，我使用从 ngOnInit 调用的 validate() 方法在 typescript 文件中进行验证。

 validate() {
  this.form = this._fb.group({
  subject: ['', Validators.compose([Validators.required])],
  dueDate: ['']
});

我能够成功地从数据库中检索值并填充表单，但它没有验证。例如，当我单击主题文本框然后单击退出时，即使文本框不为空，它也会显示错误消息 please enter assignment subject。该按钮也被禁用。

Answer 1

不建议同时使用templete-driven form 和model-driven form。

对于ReactiveForm，你应该通过

来初始化元素

this.form = this._fb.group({
  subject: ['init value', Validators.compose([Validators.required])],   // init here
  ...
});

根据您的情况（更改主题值），您不应该使用[value]（用于模板驱动的表单），而是使用patchValue。

this.assignment.subscribe(asnDetails => {
  this._assignment = asnDetails;
  if (this._assignment.subject) {
    this.form.get('subject').patchValue(this._assignment.subject);
  }
});

Answer 2

    ngOnInit() {
          this.form = this._fb.group({
          subject:['', [Validators.required]],
          dueDate: [''] 
        }

否则，你应该触发 ngOnInit 中的函数

  ngOnInit() {
               validate();
            }