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

Question

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>

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.

Answer 1

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