无法在被动表单

Question

我有一个read-only text input (3)，如下所示。

.TS

wokeUpTime: number = 0;

constructor(public formBuilder: FormBuilder, ) {
    this.sleepingDetailsForm = formBuilder.group({
      wokeUpTime: [0],
     });
  }

save(data): void {
  if (this.sleepingDetailsForm.valid) {
  //save
 }
}

html的

<form [formGroup]="sleepingDetailsForm" (submit)="save(sleepingDetailsForm)" novalidate>
     <h3 color="primary">Woke up time?</h3>
     <div class="wokeuptime">
       <button type="button" (click)="decreaseWokeupTime()">-</button>
        <input type="text" [readonly]="true" value={{wokeUpTime}} formControlName="wokeUpTime">
       <button type="button" (click)="increaseWokeupTime()">+</button>
    </div>
 <button ion-button block type="submit" [disabled]="!sleepingDetailsForm.valid">Save</button>

这里的问题是，我无法通过wokeUpTime获得只读文本输入的值。这里我使用了被动形式方法。我知道这是因为我没有发生在文本框中键入任何内容。但这是什么解决方法？我需要通过表单变量this.sleepingDetailsForm获取值。我该怎么做？我知道我可以直接从this.wokeUpTime方法中的save()获取值，因为它是一个全局变量。但是我怎样才能从form本身获得它？

Answer 1

编辑或者甚至更好，如果您正在使用wokeUpTime，您可以使用单向绑定，并且表单控件将获得设置值：

<input type="text" [ngModel]="wokeUpTime" [readonly]="true" 
        formControlName="wokeUpTime">

原始帖子：

无论您是增加还是减少，都需要在执行此操作时将值设置为表单控件。

所以它应该是：

this.sleepingDetailsForm.get('wokeUpTime').patchValue(...the new value here...)

然后您的值将成为表单值的一部分。

Answer 2

如果您使用的是被动表单，则不应该尝试绑定value。您可以使用this.sleepingDetailsForm.value从代码中获取表单组的当前状态 - 因此，获取字段的值就像this.sleepingDetailsForm.value.wokeUpTime一样简单。