NativeScript - Как проверить правильность формы при использовании RadForms? - PullRequest
Новая
       8

NativeScript - Как проверить правильность формы при использовании RadForms?

0 голосов
/ 23 января 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://play.nativescript.org/?template=play-ng&id=CQnglb&v=2

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

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

<StackLayout>

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

    <Button text="Log In" (tap)="onLogin()" class="btn btn-primary"
        isEnabled="{{ f.valid === true }}">
    </Button>

</StackLayout>

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

export class HomeComponent implements OnInit {

  ngOnInit(): void {
  }

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

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

1 Ответ

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

Использование события propertyValidated, 

onDataFormLoaded(event) {
    const form = event.object;
    fromEvent(form, "propertyValidated")
        .pipe(
            takeWhile(() => !this.destroyed),
            delay(100),
        )
        .subscribe(() => {
            this.ngZone.run(() => {
                this.hasErrors = form.hasValidationErrors();
            });
        });
}

Пример игровой площадки

...