Preciso validar vários fields (text, DropDown) em um formulário, que está dividido em dois :
<StackLayout>
<TextField required [text]="usr.nome" [(ngModel)]="usr.nome"></TextField>
<TextField required [text]="usr.idade" [(ngModel)]="usr.idade"></TextField>
<TextField required [text]="usr.endereco" [(ngModel)]="usr.endereco"></TextField>
<DropDown [items]="itemsList" hint="Escolha" [(ngModel)]="usr.escolaridade" required></DropDown>
</StackLayout>
<StackLayout>
<TextField required [text]="usr.nome" [(ngModel)]="usr.nome"></TextField>
<TextField required [text]="usr.idade" [(ngModel)]="usr.idade"></TextField>
<TextField required [text]="usr.endereco" [(ngModel)]="usr.endereco">
</TextField>
<DropDown [items]="itemsList" hint="Escolha" [(ngModel)]="usr.escolaridade" required></DropDown>
</StackLayout>
<Label [text]="validation.valid ? 'Tudo OK!' : 'Campos sem preencher'"> </Label>
Para campos do form, eu vi que é possível utilizar o id passando como um ngModel, e recuperando esse componente com o parâmeteo ".valid", como no exemplo:
<StackLayout class="p-20">
<Label text="Required Textfield" class="h1 text-center"></Label>
<TextField required hint="fill this out..." [(ngModel)]="textField" #elementModel="ngModel"></TextField>
<Label class="validation" [visibility]="elementModel.valid ? 'collapse' : 'visible'" text="Field is required" ></Label>
<Label [text]="element.className"></Label>
<Label [text]="elementModel.valid"></Label>
<Button [visibility]="elementModel.valid ? 'visible' : 'collapse'" text="Save" class="btn btn-primary"></Button>
</StackLayout>
Qual a melhor forma de validar todos os campos, sem precisar chamar todos os elementos na Label para fazer uma condicional?