无法获取反应形式的只读文本框值

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 获取只读文本输入的值。这里我使用的是反应形式 approach.I 知道这是因为我不是在文本中输入任何内容 box.But 解决方法是什么？我需要通过表单变量 this.sleepingDetailsForm 获取值。我该怎么做？我知道我可以直接从 save() 方法中的 this.wokeUpTime 获取值，因为它是一个全局变量。但是我怎样才能从 form 本身得到它呢？

Answer 1

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

一样简单

Answer 2

编辑： 或者更好，如果你正在使用 wokeUpTime，你可以使用单向绑定，表单控件将获得值集:

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

原创 POST:

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

所以应该是：

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

那么您的值将成为表单值的一部分。

无法获取反应形式的只读文本框值

Unable to get the read only text box value on reactive form

reactive

angular