html - 在 Angular 中使用 PatchValue 或 SetValue 根据更新的 FormControl 更新输入类型时间
问题描述
我有一个包含 3 个输入的表单组。第一个输入是时间输入,另外两个是自定义表单组件。我设置了一个 form.patchValue 来更新表单值,如下所示,但是它不会更新 UI,时间输入仍然是空的。
如何使用 patchValue 更新输入?
this.scheduleAutoReportForm = new FormGroup(
{
reportAt: new FormControl( '12:00' , Validators.required),
days: new FormControl([],Validators.required),
email: new FormControl([],[Validators.required])
}
);
this.scheduleAutoReportForm.patchValue({
reportAt: '24:00',
days:["2","4"],
email: ['placeholder@gmail.com']
});
this.ref.detectChanges();
更新
我进行了实验,结果发现文本框得到了更新,但时间没有更新。
<div class="modal-header">
<h4 class="h-primary modal-title">Schedule Auto Report</h4>
<mh1-icon-button [icon]="faTimes" [iconClasses]="['btn', 'btn-sm', 'mx-0']" iconSize="lg" (click)="closeModal()">
</mh1-icon-button>
</div>
<div class="modal-body card">
<!-- This is where the form starts -->
<form [formGroup]='scheduleAutoReportForm' (ngSubmit)='onSubmit()'>
<div class="row">
<div class="col-3">
<label for="reportAt" ><h5>Send Report At:</h5></label>
<input type="time" name='reportAt' formControlName='reportAt' class="form-control" required>
</div>
</div>
<div class="row">
<div class="col-3">
<label for="test" >test</label>
<input type="text" name='test' formControlName='test' class="form-control" >
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<sentryx-day-selector formControlName="days"></sentryx-day-selector>
</div>
</div>
<div class="row mt-2">
<div class='col-12'>
<sentryx-email-chips formControlName="email"></sentryx-email-chips>
</div>
</div>
<div class="row mt-5">
<div class="col-12">
<button type="submit" class="btn btn-md btn-secondary"
[disabled]="!scheduleAutoReportForm.valid">Submit</button>
<button type="cancel" class="btn btn-md btn-secondary">Cancel</button>
</div>
</div>
</form>
</div>
<div class="modal-footer card">
{{scheduleAutoReportForm.value | json}}
{{schedule | json}}
</div>
解决方案
您是否在修补值后尝试调用 updateValueAndValidity() ?看
推荐阅读
- python - 我该如何改进呢?
- async-await - 为什么`Box
` 在使用 Tokio 和实验性 async/await 支持时不实现 `Sink` 特性? - c# - 根据值从表中创建组/块
- java - 部署后的 Spring Boot IT 测试
- php - 将一个 csv 文件中的行替换为另一个 id 相同 PHP 的 csv?
- html - 如何用替代图像替换 HTML 图像?
- assembly - 汇编 jmp 到不存在的行
- agda - 单价公理是内射的吗?
- javascript - Javascript getElementById 但保留旧值
- android - 服务 stopForeground(false) 不应该删除通知