angular - 如何在标签中使用表单控件名称 - 角度反应形式

Question

我正在使用角度反应形式，并在我的表单中为一个包含标签的字段填充值，其余所有字段都包含表单控件名称。我正在尝试通过订阅从服务中设置数据。所以在这里我可以通过除标签之外的表单控件名称填充所有表单数据。由于标签不包含表单控件名称，因此我无法为其设置值。

这是我的表格：

<div [formGroup]="myForm">
    
            
                <label>
                Roll number
                </label>
         
          
              <label>
                {{rollnum}}
              </label>
            
</div>

通常现在我正在设置这样的其他字段

  myForm.control.formcontrolname.setValue('value');

如果它是同一个组件，那么我可以分配值，rollnum以便填充该值，但是从其他一些服务中，我如何将值设置为 rollnum，并且有什么方法可以为该标签使用 formcontrolname。

标签： angularangular-reactive-forms

Answer 1

查看您的评论，我了解到您需要在从服务加载数据后才在 {{rollnum}} 上显示内容。

请尝试以下代码在您的 ts 文件中，声明一个变量调用 dataLoaded。该变量将是一个布尔值，可以保存值 true 和 false。最初，我们将其设置为 false。

dataLoaded : boolean = false;

接下来我们将调用服务来加载数据。

serviceToLoadData(){
   this.serviceCall.getdata().subscribe((data)=>{
    // here you would do the processing of the data and the data will be loaded to 
    //rollnum.
    //Once the data is loaded set the value of dataLoaded to true.
    this.dataLoaded = true;
   });
}

在你的 HTML 文件中

<div [formGroup]="myForm">


                <label class="bx--label" style ="margin-left: 4rem">
                Roll number
                </label>


              <label *ngIf="dataLoaded" class="bx--label" style ="margin-left: 1rem">
                {{rollnum}}
              </label>

</div>

在这种情况下，只有当 dataLoaded 为 true 时才会显示标签。

您可以将相同的原则应用于 div。在 div 上，您可以应用 ngIf。

希望这能解决问题。