Question

我正在使用反应式控件构建动态表单，我需要能够显示数据，而不是在Input控件中使用它。我基本上有一个开关，可以在基于输入的输入和只读（用于打印）之间切换表单。但是，我不能将标签或跨度与formControlName标记一起使用。因此，我正在遍历表单组对象，看来应该有一种更简单的方法。例如，要在FormArray内打印title属性，请使用：

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

如果可以的话，会容易得多

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

或类似的东西。这可能吗？

谢谢。

Answer 1

显然，不能使用基于非输入的控件来完成。正如我在问题中所展示的，您必须直接在HTML中使用formGroup集合。

Answer 2

我以这种方式实现了反应形式。我遍历了数据。注意此处的ControlType字段。如果希望将其显示为READONLY或仅显示为TEXTBOX，则这是我们在switch中使用的字段。在控件中，我使用了atrribute只读。

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

然后在我的组件中，我正在构建FormGroup []数组。注意此处的“ ControlType”字段。可以将其赋值为Textbox或TextboxReadOnly或任何您想要的术语。

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);
      });
    });
  }

在标签或跨度中使用formControlName？

2 个答案: