以角度与 FormControlName 绑定

Posted 2023-03-13

【中文标题】以角度与 FormControlName 绑定

【英文标题】：Binding with FormControlName in angular

【发布时间】：2020-01-03 19:00:09

【问题描述】：

我正在尝试使用 formbuilder (formControlName) 绑定我的数据

它在添加数据时工作正常，但在读取或尝试更新数据时日期选择器为空。 这是我的html代码

 <div class="form-group">
            <label for="picker2" class="control-label">'DateOfExpense' | translate</label>
            <div class="input-group">
              <input class="form-control" [matDatepicker]="picker" readonly
                placeholder="'DateOfExpense' | translate"  
                formControlName="DateOfExpense" >
              <mat-datepicker-toggle matSuffix [for]="picker"  ></mat-datepicker-toggle>
              <mat-datepicker #picker></mat-datepicker>
              <mat-error *ngIf="submitted && f.DateOfExpense.errors!=null">
                  <div *ngFor="let error of getErrors(f.DateOfExpense)">
                      -  error | translate
                  </div>
              </mat-error>
            </div>
          </div>

【问题讨论】：

你能做一个最小的 stackblitz 来看看吗？

【参考方案1】：

如果您在 HTML Temple 中使用 formControlName，那么它应该在您的 Angular 组件的相应 FormGroup 实例下，只有这样输入字段的值才会绑定到组件数据。

希望下面的链接能帮助你理解formControlName的用法。 https://***.com/a/40172009/1430266

【参考方案2】：

您是否将表单元素（输入等）包装在表单标签中并给它一个表单组？您可能想浏览一下文档