我们如何在 Typescript 中动态隐藏或显示 RadDataForm 字段？

Question

我正在开发 Nativescript+angular 应用程序并使用 RadDataForm。这是我的示例代码。

<RadDataForm (propertyValidate)="onPropertyValidate($event)" row="0" tkExampleTitle tkToggleNavButton #myDataForm [source]="person" 
[metadata]="personMetadata"></RadDataForm>

我正在使用 "Json" 文件创建表单。

{
  "isReadOnly": false,
  "commitMode": "Immediate",
  "validationMode": "Immediate",
  "propertyAnnotations": [
    {
      "name": "insurance_name",
      "displayName": "Insurance Name",
      "index": 0,
      "validators": [
        {
          "name": "NonEmpty",
          "params": {
            "errorMessage": "Insurance Name cannot be empty."
          }
        },
        { "name": "MinimumLength", "params": { "length": 4 } }
      ]
    },
    {
      "name": "name",
      "displayName": "Name",
      "index": 1,
      "validators": [
        {
          "name": "NonEmpty",
          "params": {
            "errorMessage": "Name cannot be empty."
          }
        }
      ]
    }
  }
]

我只是想知道我们如何 show/hide 在打字稿文件中动态地显示特定字段。假设我必须在选择下拉值时显示一些字段。希望你们理解我的担忧。有知道的请告知

Answer 1

这是一个简单的示例，您可以根据需要进行改进。

HTML

<RadDataForm [source]="person" [metadata]="personMetadata"
    (propertyValidated)="onPropertyValidated($event)"></RadDataForm>

TS

import { Component, ViewChild } from "@angular/core";

import { RadDataForm, DataFormEventData } from "nativescript-ui-dataform";
import { RadDataFormComponent } from "nativescript-ui-dataform/angular";

declare var android;

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ["./home.component.css"]
})
export class HomeComponent {

    person = {
        insurance_name: "",
        name: "",
        location: ""
    };

    personMetadata = {
        "isReadOnly": false,
        "commitMode": "Immediate",
        "validationMode": "Immediate",
        "propertyAnnotations": [
            {
                "name": "insurance_name",
                "displayName": "Insurance Name",
                "index": 0,
                "validators": [
                    {
                        "name": "NonEmpty",
                        "params": {
                            "errorMessage": "Insurance Name cannot be empty."
                        }
                    },
                    { "name": "MinimumLength", "params": { "length": 4 } }
                ]
            },
            {
                "name": "name",
                "displayName": "Name",
                "index": 1,
                "validators": [
                    {
                        "name": "NonEmpty",
                        "params": {
                            "errorMessage": "Name cannot be empty."
                        }
                    }
                ]
            },
            {
                "name": "location",
                "displayName": "Location",
                "index": 2
            }
        ]
    };

    onPropertyValidated(event: DataFormEventData) {
        if (event.propertyName === "insurance_name") {
            const editor = (<RadDataForm>event.object).getPropertyByName("name").editor;
            if (editor.android) {
                // Using hidden on Android throws exception here, if you want to show / hide the control from a different place (not while validation), it might work.
                editor.android.rootLayout().setVisibility(event.entityProperty.isValid ? android.view.View.VISIBLE : android.view.View.GONE);
            } else {
                (<RadDataForm>event.object).getPropertyByName("name").hidden = !event.entityProperty.isValid;
            }
        }
    }
}

我们如何在 Typescript 中动态隐藏或显示 RadDataForm 字段？

How we can hide or show RadDataForm fields dynamically in Typescript?

nativescript

nativescript-angular