NativeScript and Angular form

For my opinion, this is most important and most difficult part of whole programming, because there are many scheme variants of realization this future and, of course, many restrictions and futures. Firstly native Android has no <Form tag, because this is not HTML application, secondary - Angular form (and supported module) this is not the same as NariveScript form (and supported module). And third part of difficulties is various validators.

So, first simplest scheme:

1. Simplest template based Angular form with NativeScriptFormsModule, FormsModule, ReactiveFormsModule.

This scheme mostly based on NativeScriptFormsModule.

On screen below you can see all you need to this scheme.

• (Html-template) Define formal <Form tag for Angular with [formGroup]="formGr" definition.
• (Html-template) Define formControlName="xxxxx" on each <TextField
• (Code) Define formGr: FormGroup; and initialize new FormGroup with all fields you used in formControlName
• (Code) Read value as formGr.get('xxxxx').value;

That's it with minimal scheme.

2. Add NgForm feature.

I have uncommented line 20 and 33 and this allow me replace speculative dummy tag <Form as StackLayout. This allow me include to scheme NgForm Angular future.

This get me additional feature. Reading value by NgForm Angular. I can receive value not as formGr.get('xxxxx').value but as ngFormRef.form.value

3. Add Validators.

This is the place to add validators

This is standard validator from my another project.

4. Add [(NgModel)] restriction.

Firstly [(NgModel)]='xxxx' is shortcut to [NgModel]='xxxx' plus (ngModelChange)='xxxx = $event' - this allow you turn on all restriction Typescript, but of course you need to prepare correct Model with full TypeScript type restriction.

For example transform this vanilla JS logic plus comments to strong TypeScript definition.

Look for example possible Typescript restriction.

• Type.ts
• TypeVsInterface.ts
• TypeManipulation.ts
• TypeNarrowing.ts
• TypeTransformations.ts

Alternative way to Typescript is yup package.

Sorry, I have no time, will continue soon...

Comments ( )