我们如何在Typescript中动态隐藏或显示RadDataForm字段? [英] How we can hide or show RadDataForm fields dynamically in Typescript?

问题描述

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

I am working on Nativescript+angular application and using RadDataForm. Here is my example code.

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

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

I am creating the form with "Json" file.

{
  "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."
          }
        }
      ]
    }
  }
]

我只想知道我们如何在打字稿文件中动态显示/隐藏特定字段.假设我必须在选择下拉值时显示一些字段. 希望你们能理解我的关心.请让我知道是否有人知道.

I just want to know that how we can show/hide the particular field dynamically in typescript file. Suppose I have to show some field on the selection of drop down value. Hope you guys understand my concern. Please let me know if any one knows.

推荐答案

下面是一个快速示例，您可以根据自己的需要进行改进.

Here is a quick example which you could improve based on your needs.

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字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！