如何修复字符串插值在带有 formControlName 的文本区域中不起作用？(Angular)

Question

在下面的代码中如果我使用

formControlName="work_sample_description"

对于 textarea ，文本区域不会加载

的值

WorkSampleObj.work_sample_description

如果我删除

formControlName="work_sample_description"

代码按预期运行..！

如何解决？

<form [formGroup]="workSampleEditForm" (ngSubmit)="edit_work_sample(workSampleEditForm.value)">
        <mat-card-content>
          <mat-form-field appearance="fill" class="full-width">
              <textarea matInput rows="7" formControlName="work_sample_description">{{WorkSampleObj.work_sample_description}}</textarea>
          </mat-form-field>
        </mat-card-content>
        <mat-card-actions>
          <button mat-button *ngIf="workSampleEditForm.disabled" (click)="workSampleEditForm.enable()">Edit description</button>
          <button mat-button *ngIf="workSampleEditForm.enabled">Save Changes</button>
          <button mat-button>Delete</button>
        </mat-card-actions>
   </form>

我也试过这个

workSampleEditForm = new FormGroup({
    work_sample_description : new FormControl(this.WorkSampleObj.work_sample_description,[])
  });

---------------
<textarea matInput rows="7" [formControlName]="'work_sample_description'"></textarea>

Answer 1

[(ngModel)] 解决我的问题。

<textarea matInput rows="7" formControlName="work_sample_description" 
[(ngModel)]="WorkSampleObj.work_sample_description"></textarea>

Answer 2

问题是，[formControlName] 需要给定表单控件的字符串名称。你正在传递对它的引用。如果您的表单组 workSampleEditForm 包含 work_sample_description 表单控件，则只需将其名称作为字符串传递（将名称放在单引号中）

<textarea 
  matInput rows="7" 
  [formControlName]="'work_sample_description'">
</textarea>

如@MikeOne 所述，如果您从 API 而不是在创建表单时获取 this.WorkSampleObj.work_sample_description 的值，则应使用 setValue.[=18 进行设置=]

ngOnInit(): void {
  this.someApiCall.subscribe((res) => {
    this.testForm.get('textAreaFC').setValue(res.value);
  });
}

参见已更新 stackblitz。

如何修复字符串插值在带有 formControlName 的文本区域中不起作用？(Angular)

How to fix string interpolation is not working in textarea with fornControlName?(Angular)

textarea

string-interpolation

angular-material

angular