Question

这是我试图显示JSON数据的HTML，基本上是使用模板驱动的方法创建动态表单。我没弄错我要去哪里

app-component.html

 <div class="ui-g">
<ng-container *ngFor="let a of UserFormArray; let i = index">
    <form #f="ngForm" name="FormName">
        <div class="ui-g">
            <ng-container *ngFor="let ab of a[i]; let i2 = index"> {{ab[i2]}}

                <ng-container *ngIf="ab[i2].type === 'text'">
                    <div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
                        Input Text 
                    </div>
                    <div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
                        <input type={{ab.type}} pInputText name={{ab.name}} ngModel #ngModel="ngModel" required>
                        <p-message severity="error" text="{{ab.name}} is required" *ngIf="ngModel.invalid && (ngModel.dirty || ngModel.touched)"></p-message>
                    </div>
                </ng-container>

                <ng-container *ngIf="ab.type === 'groupCheckBox'">
                    <div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
                        Group CheckBox
                    </div>
                    <div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
                        <ng-container *ngFor="let item of ab.groupCheckBoxValue; let i = index">
                            <p-checkbox name={{ab.groupCheckBoxName[i]}} value="{{ab.groupCheckBoxValue[i]}}" label="{{ab.groupCheckBoxValue[i]}}" ngModel
                                #ngModel="ngModel" required></p-checkbox>
                            <p-message severity="error" text="{{ab.groupCheckBoxName[i]}} is required" *ngIf="ngModel.invalid && (ngModel.dirty || ngModel.touched)"></p-message>
                        </ng-container>
                    </div>
                </ng-container>

                <ng-container *ngIf="ab.type === 'checkbox'">
                    <div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
                        CheckBox
                    </div>
                    <div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
                        <p-checkbox name={{ab.name}} value="{{ab.value}}" label="{{ab.value}}" ngModel #ngModel="ngModel" required></p-checkbox>
                        <p-message severity="error" text="{{ab.name}} is required" *ngIf="ngModel.invalid && (ngModel.dirty || ngModel.touched)"></p-message>
                    </div>
                </ng-container>

                <ng-container *ngIf="ab.type === 'radio'">
                    <div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
                        Radio button
                    </div>
                    <div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
                        <ng-container *ngFor="let item of ab.radioValue; let i = index">
                            <p-radioButton name={{ab.name}} value="{{ab.radioValue[i]}}" label="{{ab.radioValue[i]}}" required ngModel #ngModel="ngModel"></p-radioButton>
                            <p-message severity="error" text="{{ab.name}} is required" *ngIf="ngModel.invalid && (ngModel.dirty || ngModel.touched)"></p-message>
                        </ng-container>
                    </div>
                </ng-container>

                <ng-container *ngIf="ab.type === 'dropdown'">
                    <div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
                        Dropdown
                    </div>
                    <div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
                        <p-dropdown name={{ab.name}} [options]="ab.dropDownValue" required ngModel #ngModel="ngModel"></p-dropdown>
                        <p-message severity="error" text="{{ab.name}} is required" *ngIf="ngModel.invalid && (ngModel.dirty || ngModel.touched)"></p-message>
                    </div>
                </ng-container>

                <ng-container *ngIf="ab.type === 'multidropdown'">
                    <div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
                        multi Dropdown
                    </div>
                    <div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
                        <p-multiSelect name={{ab.name}} [options]="ab.dropDownValue" required ngModel #ngModel="ngModel"></p-multiSelect>
                        <p-message severity="error" text="{{ab.name}} is required" *ngIf="ngModel.invalid && (ngModel.dirty || ngModel.touched)"></p-message>
                    </div>
                </ng-container>

            </ng-container>
        </div>

    </form>
    <div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
        <p-button label="Click" (onClick)="sender(f)"></p-button>
    </div>

</ng-container>
</div>

JSON数据

[
{
    "name": "firstname",
    "type": "text",
    "placeholder": "Enter your name"
},
{
    "name": "city1",
    "type": "checkbox",
    "value": "aditya"
},
{
    "name": "LastName",
    "type": "text",
    "placeholder": "Enter your name"
},
{
    "groupCheckBoxName": [
        "vehicle1",
        "vehicle2",
        "vehicle3"
    ],
    "type": "groupCheckBox",
    "groupCheckBoxValue": [
        "Bike",
        "Car",
        "Boat"
    ]
},
{
    "name": "gender",
    "type": "radio",
    "radioValue": [
        "male",
        "female",
        "other"
    ]
},
{
    "name": "city",
    "type": "dropdown",
    "dropDownValue": [
        {
            "label": "Select City",
            "value": null
        },
        {
            "label": "New York",
            "value": {
                "id": 1,
                "name": "New York",
                "code": "NY"
            }
        },
        {
            "label": "Rome",
            "value": {
                "id": 2,
                "name": "Rome",
                "code": "RM"
            }
        },
        {
            "label": "London",
            "value": {
                "id": 3,
                "name": "London",
                "code": "LDN"
            }
        },
        {
            "label": "Istanbul",
            "value": {
                "id": 4,
                "name": "Istanbul",
                "code": "IST"
            }
        },
        {
            "label": "Paris",
            "value": {
                "id": 5,
                "name": "Paris",
                "code": "PRS"
            }
        }
    ]
},
{
    "name": "multicity",
    "type": "multidropdown",
    "dropDownValue": [
        {
            "label": "Select City",
            "value": null
        },
        {
            "label": "New York",
            "value": {
                "id": 1,
                "name": "New York",
                "code": "NY"
            }
        },
        {
            "label": "Rome",
            "value": {
                "id": 2,
                "name": "Rome",
                "code": "RM"
            }
        },
        {
            "label": "London",
            "value": {
                "id": 3,
                "name": "London",
                "code": "LDN"
            }
        },
        {
            "label": "Istanbul",
            "value": {
                "id": 4,
                "name": "Istanbul",
                "code": "IST"
            }
           },
           {
               "label": "Paris",
            "value": {
                  "id": 5,
                "name": "Paris",
                "code": "PRS"
            }
         }
      ]
   }
]

我从服务中获取数据并将其存储在UserFormArray中，这是我使用ngFor的数组。但这只是向我显示按钮

app-component.ts

 @Input()
 data : FormValue[];

 ngOnChanges() {
  if(!!this.data){         
    this.UserFormArray = this.data
    console.log("data ngonchange", this.UserFormArray);
  }

使用ngOnChange，因为要将数据分配给数组，以便它应该显示数据

Answer 1

删除您的第一个*ngFor，然后在第二个中进行更正。

<div class="ui-g">
<ng-container>
    <form #f="ngForm" name="FormName">
        <div class="ui-g">
            <ng-container *ngFor="let ab of UserFormArray; let i2 = index"> {{ab[i2]}}

                <ng-container *ngIf="ab[i2].type === 'text'">
                    <div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
                        Input Text 
                    </div>
                    <div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
                        <input type={{ab.type}} pInputText name={{ab.name}} ngModel #ngModel="ngModel" required>
                        <p-message severity="error" text="{{ab.name}} is required" *ngIf="ngModel.invalid && (ngModel.dirty || ngModel.touched)"></p-message>
                    </div>
                </ng-container>

                <ng-container *ngIf="ab.type === 'groupCheckBox'">
                    <div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
                        Group CheckBox
                    </div>
                    <div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
                        <ng-container *ngFor="let item of ab.groupCheckBoxValue; let i = index">
                            <p-checkbox name={{ab.groupCheckBoxName[i]}} value="{{ab.groupCheckBoxValue[i]}}" label="{{ab.groupCheckBoxValue[i]}}" ngModel
                                #ngModel="ngModel" required></p-checkbox>
                            <p-message severity="error" text="{{ab.groupCheckBoxName[i]}} is required" *ngIf="ngModel.invalid && (ngModel.dirty || ngModel.touched)"></p-message>
                        </ng-container>
                    </div>
                </ng-container>

                <ng-container *ngIf="ab.type === 'checkbox'">
                    <div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
                        CheckBox
                    </div>
                    <div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
                        <p-checkbox name={{ab.name}} value="{{ab.value}}" label="{{ab.value}}" ngModel #ngModel="ngModel" required></p-checkbox>
                        <p-message severity="error" text="{{ab.name}} is required" *ngIf="ngModel.invalid && (ngModel.dirty || ngModel.touched)"></p-message>
                    </div>
                </ng-container>

                <ng-container *ngIf="ab.type === 'radio'">
                    <div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
                        Radio button
                    </div>
                    <div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
                        <ng-container *ngFor="let item of ab.radioValue; let i = index">
                            <p-radioButton name={{ab.name}} value="{{ab.radioValue[i]}}" label="{{ab.radioValue[i]}}" required ngModel #ngModel="ngModel"></p-radioButton>
                            <p-message severity="error" text="{{ab.name}} is required" *ngIf="ngModel.invalid && (ngModel.dirty || ngModel.touched)"></p-message>
                        </ng-container>
                    </div>
                </ng-container>

                <ng-container *ngIf="ab.type === 'dropdown'">
                    <div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
                        Dropdown
                    </div>
                    <div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
                        <p-dropdown name={{ab.name}} [options]="ab.dropDownValue" required ngModel #ngModel="ngModel"></p-dropdown>
                        <p-message severity="error" text="{{ab.name}} is required" *ngIf="ngModel.invalid && (ngModel.dirty || ngModel.touched)"></p-message>
                    </div>
                </ng-container>

                <ng-container *ngIf="ab.type === 'multidropdown'">
                    <div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
                        multi Dropdown
                    </div>
                    <div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
                        <p-multiSelect name={{ab.name}} [options]="ab.dropDownValue" required ngModel #ngModel="ngModel"></p-multiSelect>
                        <p-message severity="error" text="{{ab.name}} is required" *ngIf="ngModel.invalid && (ngModel.dirty || ngModel.touched)"></p-message>
                    </div>
                </ng-container>

            </ng-container>
        </div>

    </form>
    <div class="ui-g-{{g1}} ui-md-{{md1}} ui-lg-{{lg1}}">
        <p-button label="Click" (onClick)="sender(f)"></p-button>
    </div>

</ng-container>
</div>

仅显示按钮动态角度

1 个答案: