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

Answer 1

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