如何使用forncontrolname在Textarea中修复字符串插值？（Angular）

Question

在以下代码中，如果我使用

formControlname =“ work_sample_description”

textarea，文本区域不加载值

worksampleambj.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

问题是， [formControlname] 期望给定表单控件的字符串名称。您正在传递它。如果您形成组 worksampleameeditform 包含 work_sample_description form

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

control this.workSampleObj.work_sample_description 的值，而不是创建表单时，应使用 setValue 进行设置。

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

请参阅更新 。

Answer 2

[（ngmodel）]解决我的问题。

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