angular - 当表单构建器具有预填充值时，如何在编辑它时验证它？

Question

我正在使用 angular 4 Form 和 Form-Group 组件来创建添加/编辑数据表单。我能够在添加任何新数据时进行适当的验证，但在编辑具有已填充输入字段的相同表单时遇到问题。

下面的代码是组件部分：

  this.saveNotification = this.formBuilder.group({
  id: '',
  name: ['', Validators.required],
  question: ['', Validators.required],
  repeatTypesControl: ['', Validators.required],
  remindAt: '',
});

if(this.isUpdateCheck){///pre-filled form on Edit
  this.saveNotification.patchValue({
    id: 4,
    name: "Deck", 
    question: "Who's Deck is this?",
    remindAt: "08:30pm",
  });

this.saveNotification.updateValueAndValidity();
   for (var i in this.saveNotification.controls) {
    this.saveNotification.controls[i].markAsTouched();
  }

下面的代码是模板部分：

<button ion-button color="secondary" type="submit" [disabled]="(!saveNotification.valid)" color="dark">SAVE</button>

我总是将 saveNotification.valid 值设为 false，因为在编辑时，这些值是从组件中逐个填充的。我试过 this.saveNotification.controls[i].markAsTouched() 但这不起作用。

Answer 1

插入

this.saveNotification.patchValue({
   id: 4,
   name: "Deck", 
   question: "Who's Deck is this?",
   remindAt: "08:30pm"
});

利用

this.saveNotification.controls['id'].setValue(4);
this.saveNotification.controls['name'].setValue('Deck');
this.saveNotification.controls['question'].setValue('Who's Deck is this?');
this.saveNotification.controls['remindAt'].setValue('08:30pm');