Solvednativescript angular FormBuilder to nativescript

Hello everyone,

I used FormBuilder to my webapps, and now I am trying to use it to nativescript but I thinks it’s not possible because FormBuilder need an input.
Is it possible to make it works?


34 Answers

✔️Accepted Answer

@VladimirAmiorkov pretty sure @AyWa is referring to ReactiveFormsModule FormBuilder:

I have been wanting to submit a PR to make that API work with nativescript-angular. Should be doable and I've heard many people desiring same thing.

Other Answers:

Hi @hdeshev,

The following is an excellent article which describes how to implement a custom Angular2 form control:

As currently the text-value-accessor.ts and others were implemented as an Angular Directive, which has the selector hard-coded to TextField[ngModel]..., etc. I believe can simply change the selector text to the following and test it out:
selector: "TextField[ngModel],TextField[formControlName]...

To test whether it works, can simply test with the following:

  • Create a project with tns
  • Modify the file app.module.ts as follows:
    import { NgModule } from "@angular/core";
    import { NativeScriptModule } from "nativescript-angular/platform";
    import { NativeScriptFormsModule } from "nativescript-angular/forms";
    import { ReactiveFormsModule } from '@angular/forms';

    import { AppComponent } from "./app.component";

        declarations: [AppComponent],
        bootstrap: [AppComponent],
        imports: [
    export class AppModule { }
  • In app.component.html, add a TextField and try to bind to a FromControl by name:
    <StackLayout class="p-20" [formGroup]="loginForm">
        <Label text="Tap the button" class="h1 text-center"></Label>
        <Button text="TAP" (tap)="onTap()" class="btn btn-primary btn-active"></Button>
        <Label [text]="message" class="h2 text-center" textWrap="true"></Label>
        <TextField formControlName="usernameControl"></TextField>
        <Label [text]="username" class="h2 text-center" textWrap="true"></Label>

Note that we also need to add a FormGroup to the binding, Angular2 form will need this

  • In app.component.ts, add logic to build the FormGroup and FormControl for the text field:
    import { Component, OnInit } from "@angular/core";
    import { AbstractControl, FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';

        selector: "my-app",
        templateUrl: "app.component.html",
    export class AppComponent {

        public counter: number = 16;

        loginForm: FormGroup;
        usernameControl: AbstractControl;
        username = '';

        constructor(private fb: FormBuilder) {}

        ngOnInit() {
            this.loginForm ={
                username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(40)]]
            this.usernameControl = this.loginForm.controls['username'];

        public get message(): string {
            if (this.counter > 0) {
                return this.counter + " taps left";
            } else {
                return "Hoorraaay! \nYou are ready to start building!";
        public onTap() {
            this.username = this.usernameControl.value;

Then test to run the application to see if it works or not.

Currently, when I run the above code, I got the following error:

CONSOLE ERROR file:///app/tns_modules/trace/trace.js:160:30: ns-renderer: Error in app.component.html:4:15 caused by: Cannot find control with name: 'usernameControl'

I believe as currently the text field value accessor doesn't pick up the attribute "formControlName", so the binding not work and Angular doesn't found any property with ControlValueAccessor implemented.

Hope this helps.

Related Issues:

nativescript angular NG11 Test failure : Error: zone-testing.js is needed for the async() test helper but could not be found.
Not sure if it will be useful in you case but I just fixed a similar error by changing the import or...
nativescript angular Screen Size Qualifiers not work in tns Angular project, only work in js project.
Just in case someone would only need tablet-specific CSS (like myself) and can't wait for an officia...
nativescript angular document.createElement is not a function
I fixed this my importing things directly like @anuragd7 mentioned I get the following error when at...
nativescript angular Lazy loaded module route redirectTo ignored or not working
@darkyelox I was able to resolve your case with the usage of children routing property as shown here...
nativescript angular After upgraded to NativeScript 3.2.0 - TypeError: Cannot read property 'reusedRoute' of undefined
Update: We are actively working on the issue It is actually an issue in the tns-core-modules so the ...
nativescript angular *ngIf not working in Angular application for hide/show layout after upgrade to NS3
I'm having some similiar issues with *ngIf sometimes the elements are rendered out of order sometime...
nativescript angular FormBuilder to nativescript
@VladimirAmiorkov pretty sure @AyWa is referring to ReactiveFormsModule FormBuilder: https://github....
nativescript angular ModalDialogService - no way to close the modal programatically
Probably not the best way but what I'm doing at the moment is to use Observables to implement this f...
nativescript angular Wrong Response.text() behavior
@chiefmc After some investigation: What you are seeing is actually toString-ed NSData of the respons...
nativescript angular RadSideDrawer Showing an error like Cannot Read property 'sideDrawer' of undefined.
@JaganJonnala That is not an acceptable answer for an already in-progress app @taibuiSW That worked ...
react native keychain SDK Build Tools revision (23.0.1) is too low for project :react-native-keychain.
Ok I found a solution to this For people facing the same problem in the future Hey there ...
material components android Manifest merger failed : Attribute application@appComponentFactory
I had similar problem We're transitioning from github issues to a public buganizer component Rather ...
expo Error: fsevents unavailable (this watcher can only be used on Darwin)
Possible solution: I had installed watchman via npm install -g watchman but apparently this installs...
flutter Multiple commands produce '/build/ios/Debug-iphonesimulator/
I was able to fix it by opening the Runner workspace project in Xcode 10 Then navigate to File ...
flutter App Store iOS submission fails: The bundle does not support the minimum OS Version specified in the Info.plist
After doing a flutter clean changing MinimumOSVersion (inside /ios/Flutter/AppframeworkInfo.plist) t...
flutter '' has different version for the compile (26.1.0) and runtime (27.0.1) classpath
is like this i receive an error when i run flutter run My file is: flutter doctor: ...
flutter Why does my text not wrap?
You have to wrap Column in a flexible Without flexible the column's width is not constrained to the ...
flutter Unexpected top padding in ListView put inside scaffold with no appBar
Yeah this is intentional If you put a widget before the ListView you should wrap the ListView with a...
flutter Missing xcode dependency: Python module "six"
try python2.x -m pip install six by @humblerookie's suggest or brew reinstall python@2 pip install s...
expo exp build:android fails
This works exp start Cancel ctrl c then do exp build:android. Running exp build:android errors fails...
flutter flutter messaging: set the notification icon
Hey guys I fought with this for the better part of a day For some strange reason there are no tutori...
flutter Issue with cloud_firestore - Cannot fit requested classes in a single dex file.
As a workaround you can try enabling mutlidex for Android App by following Enable multidex for apps ...
flutter D8: Program type already present: io.flutter.BuildConfig
@smrucv I received the same error but after flutter clean and flutter packages get everything works ...
flutter Introduction of characters package causes crash on flutter run for preexisting Flutter applications
In my case I resolved the issue with flutter clean After e0ed12c I get this error when building: @ju...
nativescript cli TNS doctor doesn't recognize Xcode (High Sierra)
HI @philipfeldmann Can yhou please run xcodebuild -version and paste the output? May be Xcode is ins...
flutter Making Network http error SocketException: Failed host lookup
@hoc081098 Double-check / make sure you have <uses-permission android:name=android.permission.INTERN...
flutter Support inlining Android/iOS views
iOS view embedding support has landed on master This is still just a preview There are multiple open...
flutter ✗ Android license status unknown.
Hi everyone Steps to Reproduce Please tell us what you were doing and what went wrong If you are run...
react native mapbox gl No static method toHumanReadableAscii
here is workaround: build.gradle got the following error on runtime: java.lang.NoSuchMethodError: No...
flutter idevice_id cannot run on catalina
When you're developing on Catalina Steps to Reproduce Run flutter doctor on macOS Catalina I get the...
flutter type 'List<dynamic>' is not a subtype of type 'List<String>'
The problem is your fromMap constructor is reading from a Map<String dynamic> ...
flutter TextField is hidden by keyboard inside of a Modal Bottom Sheet
This may not work for all situations but I have a modalBottomSheet that contains only a TextField ...
retrofit Kotlin & @Body
You can still use Map just suppress its wildcardness with @JvmSuppressWildcards ...
NativeBase Needs to tap twice to fire onPress function when keyboard is open
@bm-software Use keyboardShouldPersistTaps={'handled'} and will works fine. react-native ...
react native firebase 🔥(Android) Program type already present: io.invertase.firebase.BuildConfig
I think I found my ultimate error here In my package.json file I had at some point earlier ...
flutter Dismissing keyboard programatically
This is a better way as it also clears the focus: FocusScope.of(context).requestFocus(new FocusNode(...
flutter How to solve: Android license status unknown and also Android sdkmanager tool not found? Tried everything(as i think)
The answer is here Uncheck Hide Obsolete Packages and you'll see Android SDK Tools (Obsolete) 26.1.1...
flutter MissingPluginException: No implementation found for method
@mravn-google Yeah turned out I had to quit the flutter run process and start it up again Just a ful...
flutter firebase_auth: ^0.8.0+1 crashes on Android
Here i put this in file: android/ and changed targetSdkVersion to 28 and it worked...
react native modal The statusbar turns white when the modal is open (only on certain devices)
statusBarTranslucent property has been added to Modal of RN 0.62 I think this problem has been solve...
flutter Android sdkmanager tool not found (C:...\Local\Android\sdk\tools\bin\sdkmanager)
This worked for me: open Android Studio's SDK Manager go to the Android SDK tab under SDK Tools ...
flutter 1.22.2 - Flutter plugin not installed; this adds Flutter specific functionality.
Hey @bhanuka96 try this line of code How do I fix this android plugin error? This error is being com...
cli pod install failure with glog
what helped me: sudo xcode-select --switch /Applications/ Ask your Question I have been try...
create react native app issue running on ubuntu 16.04 (watchman)
I got it working by running: OS Info: Run: Output: ...
flutter [ios][release] GeneratedPluginRegistrant.m Module not found
I may have found the answer from this comment: #21989 (comment) Seems like by opening up the project...
flutter [App.framework] Linked and embedded framework 'App.framework' was built for iOS/iOS Simulator
Does rm -rf ios/Flutter/App.framework get you unstuck? SOLUTION @jmagman has written an article on h...