use formControlName in a label or span?

Question

I'm building a dynamic form using reactive controls and I need to be able to show the data instead of using it in an Input control. I basically have a switch that toggles the form between input based and read-only (for printing). However, I can't use label or span with the formControlName tag. Thus, I'm doing a hack to traverse the form group object and it seems like there should be an easier way. For example, to print the title property inside of a FormArray I use:

<div *ngIf="isPrinting">{{group.controls[config.fieldName].value[i].title}}</div>

It would be so much easier if I could do

<span *ngIf="isPrinting" formControlName="title"></span> 

or something similar. Is this possible?

Thanks.

Answer 1

Apparently it can't be done using non-input based controls. You have to use the formGroup collection directly in the HTML as I showed in my question.

Answer 2

I implemented reactive forms this way. I iterated (looped) thru the data. Notice here the field ControlType. It's the field that we use in switch if we want it to be displayed as READONLY or just plain TEXTBOX. THen in the control, i used atrribute readonly.

<div class="container main-container" >
    <div class="list_container"  *ngIf="form">
        <form class="ml-5"  (ngSubmit)="submitMyData()" [formGroup] ="form">

            <fieldset>
                <div formArrayName="myData" >
                    <div  class="p-1" *ngFor="let singleDataRow of form.controls.myData.controls; let i=index">

                        <div class="panel-body" [formGroupName] ="i">
                            <div class="row pl-5">
                                <div class="col-md-2">

                                    <p>{{singleDataRow.get('name').value}}</p>
                                </div>
 <div [ngSwitch]="setting.get('controlType').value" class="col-md-5">


                                    <div  style="float: left">
                       <input  *ngSwitchCase="Textbox"  style="width: 300px" type="text" class="form-control" formControlName="value"> </input>
                       <input  *ngSwitchCase="TextboxReadOnly"  style="width: 300px" type="text" class="form-control" formControlName="value" readonly> </input>

                                    </div>


                                  <div class="col-md-3">  <span class="help-block" *ngIf="singleDataRow.get('value').errors">
                                        <span *ngIf="singleDataRow.get('value').errors.required">
                                            <p style="color: red">This field is required.</p>
                                        </span>
                                    </span></div>
                            </div>
                         </div>

                        </div>

                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-4 col-md-offset-2">
                        <span>
                            <buttonid="master-data-submit-button" [disabled]="!form.valid || !form.dirty"  type="success"  text="Save">
                            </button>
                        </span>
                        <span class="help-block" *ngIf = "!form.dirty">
                            <span>
                                <p style="color: red">{{message}}</p>
                            </span>
                        </span>
                    </div>
                </div>

            </fieldset>

            </form>

 </div>
</div>

Then in my Component, I am building theFormGroup[] array.. Notice here the field "ControlType". It can be valued as Textbox or TextboxReadOnly, or any terms you want.

getGroupArray(): void {
    const formGroups: FormGroup[] = [];
    this.loadData(formGroups);
  }

   loadData(formGroups: any[]) {


    this._service.getData().subscribe((myData: Array<any>) => {

      myData.forEach(singleRow => {

        formGroups.push(this.fb.group({
          id: singleRow.id,
          name: singleRow.name,
          value: singleRow.value,
          controlType: singleRow.controlType//this can be from a variable, lets say isPrinting=true, then we set this to TextboxReadOnly
          ....

        }));
        this.buildForm(formGroups);
      });
    });
  }