NativeScript & Angular: как получить ссылку на форму на основе шаблона в моем компоненте?

Question

У меня есть форма на основе шаблона:

<form #f="ngForm" novalidate>

                    <TextField
                        required
                        hint="Client Code:"
                        [class.is-invalid]="clientCodeField.invalid && clientCodeField.dirty"
                        [(ngModel)]="clientcode"
                        name="clientcode"
                        autocorrect="false"
                        returnType="done"
                        (returnPress)="onLogin()"
                        autocapitalizationType="none"
                        #clientCodeField="ngModel">
                    </TextField>

            <Button
                text="Submit"
                (tap)="onLogin()"
                class="btn-red-rounded"
                isEnabled="{{ f.valid === true }}">
            </Button>

</form>

Я хочу получить ссылку на форму в моем компоненте, чтобы я мог проверить правильность формы. Я пытался сделать это, но он говорит, что это не определено. Как я могу это сделать?

Моя попытка:

export class RegisterClientCodeComponent implements OnInit {

f: FormGroup;

public clientcode: string = '';

constructor() { }

public ngOnInit() {}

public onLogin() {

    if(this.f.valid) {
        return;
    }

    //do stuff
}
}

Answer 1

Angular требуется тег form для работы с NgForm, у нас его нет в NativeScript. Таким образом, вы можете зарегистрировать StackLayout как form, возможно, в вашем модуле приложения.

import { registerElement } from "nativescript-angular";

registerElement("form", () => StackLayout);

HTML

<GridLayout>
    <ScrollView>
        <form #f="ngForm" class="home-panel" backgroundColor="red">
            <TextField [(ngModel)]="name" name="name" required>
            </TextField>
            <Button text="Submit" (tap)="onSubmit()"></Button>
        </form>
    </ScrollView>
</GridLayout>

TS

@ViewChild('f', { static: true }) form: NgForm;

onSubmit() {
    console.log(this.form.invalid);
}