NativeScript - Как заставить RadForms появляться? - PullRequest
Новая
       22

NativeScript - Как заставить RadForms появляться?

0 голосов
/ 15 января 2020

Я работаю над новым проектом NativeScript с Angular 8. Я исследую различные способы создания форм.

Один из вариантов - использовать RadFroms, предоставленные командой NativeScript.

Я установил этот плагин: https://www.npmjs.com/package/nativescript-ui-dataform

Я следовал инструкциям на этой веб-странице, но он не работал для меня: https://docs.nativescript.org/ui/components/DataForm/dataform-overview#editors

В основном форма не отображается на главной странице.

Вот мой код для воспроизведения проблемы: https://github.com/aquinn637/RadFormsTest

Детская площадка: h https://play.nativescript.org/?template=play-ng&id=DFKrMA

Вот также фрагмент кода:

шаблон домашней страницы 

<StackLayout>

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

</StackLayout>

компонент домашней страницы 

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

1 Ответ

1 голос
/ 23 января 2020

Вы использовали неправильные атрибуты, пожалуйста, внимательно ознакомьтесь с документами.

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

Обновленная игровая площадка

...