Как использовать имя элемента управления формы в метке - angular реактивные формы - PullRequest
Новая
       4

Как использовать имя элемента управления формы в метке - angular реактивные формы

0 голосов
/ 16 апреля 2020

Я использую angular реактивные формы и в моей форме для одного поля, содержащего метку, для заполнения значения, а остальные поля содержат имена элементов управления формы. И я пытаюсь установить данные из сервиса через подписку. Так что здесь я могу заполнить все данные формы через имена элементов управления, кроме метки. Поскольку метка не содержит имени элемента управления формы, я не могу установить значение для этого.

Это моя форма: 

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

Обычно сейчас я настраиваю для других полей, таких как myForm.control.formcontrolname.setValue ('value');

Если это тот же компонент затем я могу присвоить значение rollnum, чтобы это значение заполнилось, но из какой-то другой службы, как я могу установить значение rollnum и есть ли способ использовать formcontrolname для этой метки.

1 Ответ

0 голосов
/ 16 апреля 2020

Просматривая ваши комментарии, я понимаю, что вам нужно показывать содержимое {{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 вы можете применить ngIf.

Надеюсь, что это решит проблему.

...