NativeScript - How to get RadForms to appear?

Question

I'm working on a new NativeScript project with Angular 8. I'm investigating the different ways we can build forms.

One option is to use the RadFroms provided by the NativeScript team.

I have installed this plugin: https://www.npmjs.com/package/nativescript-ui-dataform

I have followed the instructions on this web page but it didn't work for me: https://docs.nativescript.org/ui/components/DataForm/dataform-overview#editors

Basically the form is not appearing on the main page.

Here is my code to reproduce the issue: https://github.com/aquinn637/RadFormsTest

Playground: hhttps://play.nativescript.org/?template=play-ng&id=DFKrMA

Here is a code snippet as well:

home page template

<StackLayout>

    <Labels text="Home Page"></Labels>
    <RadDataForm [source]="source"></RadDataForm>

</StackLayout>

home page component

export class HomeComponent implements OnInit {

  ngOnInit(): void {
  }

  public source = {
    isReadOnly: false,
    propertyAnnotations: [
      {
        name: 'username',
        displayName: 'Username',
        editor: 'Text',
        validators: [ { name: 'NonEmpty' } ]
      },
      {
        name: 'password',
        displayName: 'Password',
        editor: 'Password',
        validators: [ { name: 'NonEmpty' } ]
      }
    ]
  };

Always try to use Playground to share sample code / project, its easier to debug / test than having to download and build your project from Github. You may opt Github only when you are testing a plugin that's not supported by Playground. Thats being said, all UI plugins are supported in Playground, you may just drag a DataForm from the list of components and quickly see it appearing without writing any code. If you still have issues, please share a Playground sample where the issue can be reproduced. — Manoj
@Manoj Thank you. I added my playground code but now there is a different error in there that I don't know how to fix. play.nativescript.org/?template=play-ng&id=eacN1T&v=3 — user1261710
Source should be an Object with key value pairs representing data. You seem trying to assign metadata on source, also the attribute name should be propertyAnnotations instead of properties I guess. Go through docs, you should be good. — Manoj
@Manoj how can I check if the form is valid or not to disable a button? <Button text="Log In" (tap)="onLogin()" class="btn btn-primary" isEnabled="{{ f.valid === true }}"> </Button> — user1261710

Manoj Manoj · Accepted Answer · 2020-01-23T15:08:21

You were using the wrong attributes, please refer the docs carefully.

HTML

 <RadDataForm [source]="source" [metadata]="metadata"></RadDataForm>

TS

public source = {
    username: '',
    password: ''
};

public metadata = {
    isReadOnly: false,
    properties: [
        {
            name: 'username',
            displayName: 'Username',
            editor: 'Text',
            validators: [{ name: 'NonEmpty' }]
        },
        {
            name: 'password',
            displayName: 'Password',
            editor: 'Password',
            validators: [{ name: 'NonEmpty' }]
        }
    ]
};

Updated Playground

NativeScript - How to get RadForms to appear?

1 Answers