@angular/forms#ReactiveFormsModule TypeScript Examples

The following examples show how to use @angular/forms#ReactiveFormsModule. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: util.module.ts From App with MIT License

7 votes

@NgModule({
	imports: [
		CommonModule,
		MaterialModule,
		RouterModule,
		ReactiveFormsModule
	],
	exports: [
		UserNameComponent,
		ContextMenuComponent,
		TwitchButtonComponent,
		WardrobeComponent
	],
	declarations: [
		UserNameComponent,
		ContextMenuComponent,
		ErrorDialogComponent,
		BanDialogComponent,
		TwitchButtonComponent,
		WardrobeComponent
	],
	providers: [],
})
export class UtilModule { }

Example #2

Source File: home.component.spec.ts From one-platform with MIT License

6 votes

describe('HomeComponent', () => {
  let component: HomeComponent;
  let fixture: ComponentFixture<HomeComponent>;
  const appService = {
    autorun: jest.fn(() => of({})),
    fetchProjects: jest.fn(() => Promise.resolve({ listLHProjects: [] })),
  };

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [HomeComponent],
      imports: [
        RouterTestingModule,
        FormsModule,
        SharedModule,
        ApolloTestingModule,
        ReactiveFormsModule,
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      providers: [
        { provide: PlaygroundService, useValue: appService },
        { provide: 'Window', useValue: window },
        Apollo,
      ],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(HomeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Example #3

Source File: leverage.module.ts From 1x.ag with MIT License

6 votes

@NgModule({
    declarations: [LeverageComponent, CreatePositionComponent, MyPositionsComponent, LeverageChartDialogComponent],
    imports: [
        CommonModule,
        LeverageRoutingModule,
        FormsModule,
        ButtonsModule,
        FontAwesomeModule,
        TooltipModule.forRoot(),
        OiUiModule,
        ReactiveFormsModule,
        LoadingSpinnerModule,
        NgbAlertModule,
        ChartsModule
    ],
    entryComponents: [
        LeverageChartDialogComponent
    ]
})
export class LeverageModule {
}

Example #4

Source File: app.module.ts From gnosis.1inch.exchange with MIT License

6 votes

@NgModule({
    declarations: [
        AppComponent,
        SlippageSettingsComponent,
        GasSettingsComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        BrowserAnimationsModule,
        MatButtonModule,
        MatSelectModule,
        FormsModule,
        ReactiveFormsModule,
        MatInputModule,
        MatFormFieldModule,
        MatTooltipModule,
        MatIconModule,
        MatRadioModule,
        NgxWebstorageModule.forRoot(),
        MatAutocompleteModule,
        NgxMatSelectSearchModule,
        MatExpansionModule,
        FontAwesomeModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

Example #5

Source File: app.component.spec.ts From homebridge-nest-cam with GNU General Public License v3.0

6 votes

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [AppComponent, LoginComponent, ProgressBarComponent],
      imports: [FormsModule, ReactiveFormsModule],
    }).compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'homebridge-ui'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.title).toEqual('homebridge-ui');
  });
});

Example #6

Source File: connect.module.ts From xBull-Wallet with GNU Affero General Public License v3.0

6 votes

@NgModule({
  declarations: [
    ConnectDashboardComponent,
    ConnectAccountComponent,
    SignRequestComponent,
    ConnectNoWalletComponent,
  ],
  imports: [
    CommonModule,
    ConnectRoutingModule,
    NzImageModule,
    NzButtonModule,
    NzListModule,
    NzStepsModule,
    NzCardModule,
    NzSelectModule,
    ReactiveFormsModule,
    SharedPipesModule,
    NzTreeSelectModule,
    BackgroundModule,
    TranslationModule.forChild(),
  ],
  providers: [
    ConnectQuery,
    ConnectStore,
    ConnectService,
  ]
})
export class ConnectModule { }

Example #7

Source File: staking.module.ts From rubic-app with GNU General Public License v3.0

6 votes

@NgModule({
  declarations: [
    StakingContainerComponent,
    StakeComponent,
    StakingTokensComponent,
    WithdrawComponent,
    SwapModalComponent,
    StakingStatisticsComponent,
    StakingInfoComponent,
    StakeButtonContainerComponent,
    StakingRoundComponent,
    StakingPageComponent,
    WithdrawButtonContainerComponent,
    BridgeStakeNotificationComponent
  ],
  imports: [
    CommonModule,
    RouterModule,
    ReactiveFormsModule,
    StakingRoutingModule,
    SharedModule,
    InlineSVGModule,
    TuiTabsModule,
    TuiHostedDropdownModule,
    TuiSelectModule,
    TuiDataListWrapperModule,
    TuiTextfieldControllerModule,
    TuiHintControllerModule,
    TuiHintModule,
    TuiProgressModule,
    TuiLoaderModule
  ],
  providers: [StakingService, StakingApiService, StakingRoundResolver]
})
export class StakingModule {}

Example #8

Source File: dynamic-forms.module.ts From ng-devui-admin with MIT License

6 votes

@NgModule({
  declarations: [
    DynamicFormsComponent,
    RadioWidget, 
    TextAreaWidget, 
    TextInputWidget,
    CheckboxWidget,
    SelectWidget,
    TagsInputWidget,
    ToggleWidget
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    FormModule,
    RadioModule, 
    SelectModule, 
    TextareaModule, 
    ButtonModule,
    TextInputModule, 
    CheckBoxModule,
    ToggleModule,
    TagsInputModule
  ],
  exports: [
    DynamicFormsComponent,
    RadioWidget, 
    TextAreaWidget, 
    TextInputWidget,
    CheckboxWidget,
    SelectWidget,
    TagsInputWidget,
    ToggleWidget
  ]
})
export class DynamicFormsModule {

}

Example #9

Source File: common-share.module.ts From dbm with Apache License 2.0

6 votes

@NgModule({
  imports: [
    NgZorroAntdModule,
    TranslateModule,
    CodemirrorModule,
    FormsModule,
    CommonModule,
    ServiceModule,
    ChartModule,
    TableModule,
    MomentModule,
    ReactiveFormsModule,
    EllipsisModule
  ],
  declarations: [
    DdlQueryComponent,
    BasicTableComponent,
    LineChartsComponent,
    EmptyAntdComponent,
    DrividerAntdComponent,
    CreateSnippetComponent
  ],
  providers: [
    ClipboardComService
  ],
  exports: [
    DdlQueryComponent,
    BasicTableComponent,
    LineChartsComponent,
    EmptyAntdComponent,
    DrividerAntdComponent,
    CreateSnippetComponent
  ]
})
export class CommonShareModule {
}

Example #10

Source File: app.module.ts From ngx-colors with MIT License

6 votes

@NgModule({
  declarations: [
    AppComponent,
    CustomTriggerExampleComponent,
    DocumentViewerComponent,
    HideElementsExampleComponent,
    CustomPaletteExampleComponent,
    ChangeAcceptLabelExampleComponent
  ],
  imports: [
    HighlightModule,
    BrowserModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    NgxColorsModule,
    MatTabsModule,
    FormsModule,
    HttpClientModule,
    MatInputModule,
    MatSlideToggleModule,
    MatButtonModule
  ],
  providers: [
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: {
        languages: getHighlightLanguages()
      }
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Example #11

Source File: app.module.ts From Collab-Blog with GNU General Public License v3.0

6 votes

@NgModule({
  declarations: [
    AppComponent,
    BlogListComponent,
    AddBlogComponent,
    NavbarComponent,
    WelcomePageComponent,
    ViewBlogComponent,
    UpdateBlogComponent,
    
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    ReactiveFormsModule,
    MatButtonModule,
    MatCardModule,
    MatInputModule,
    MatListModule,
    MatToolbarModule,
    MatSliderModule,
    MatMenuModule,
    MatFormFieldModule,
    BrowserAnimationsModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Example #12

Source File: date-field.module.ts From canopy with Apache License 2.0

6 votes

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    LgLabelModule,
    LgInputModule,
    LgValidationModule,
    LgMarginModule,
    LgFocusModule,
  ],
  declarations: [ LgDateFieldComponent ],
  exports: [ LgDateFieldComponent ],
  entryComponents: [ LgDateFieldComponent ],
})
export class LgDateFieldModule {}

Example #13

Source File: app.module.ts From master-frontend-lemoncode with MIT License

6 votes

@NgModule({
  declarations: [
    AppComponent,
    MenuComponent,
    UserListComponent,
    HighlightDirective,
    SearchByLoginPipe
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Example #14

Source File: app.module.ts From mslearn-live-azure-fundamentals with MIT License

6 votes

@NgModule({
  declarations: [
    AppComponent,
    ProductsListComponent,
    AdminProductsListComponent,
    ProductComponent,
    AdminProductComponent,
    AboutComponent,
    NavmenuComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    ReactiveFormsModule,
    RouterModule.forRoot([
      { path: 'home', component: AboutComponent },
      { path: 'product/:productId', component: ProductComponent },
      { path: 'products', component: ProductsListComponent },
      { path: 'admin/products', component: AdminProductsListComponent },
      { path: 'admin/product/:productId', component: AdminProductComponent },
      { path: '**', redirectTo: 'home' }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Example #15

Source File: app.module.ts From mylog14 with GNU General Public License v3.0

6 votes

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (LanguageLoader),
        deps: [HttpClient],
      }
    }),
    CoreModule,
    SharedModule,
    LottieModule.forRoot({ player: playerFactory }),
    ReactiveFormsModule,
    FormlyModule.forRoot(),
    FormlyIonicModule
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Example #16

Source File: app.module.ts From acnh.directory with MIT License

6 votes

@NgModule({
  declarations: [
    AppComponent,
    PrivacyComponent,
    DirectoryComponent
  ],
  imports: [
    HttpClientModule,
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    NgMultiSelectDropDownModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Example #17

Source File: app.module.ts From leapp with Mozilla Public License 2.0

6 votes

@NgModule({
  declarations: [AppComponent, TrayMenuComponent],
  imports: [
    ComponentsModule,
    MatSnackBarModule,
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    NgSelectModule,
    LayoutModule,
    TooltipModule.forRoot(),
    ModalModule.forRoot(),
    ToastrModule.forRoot(),
  ],
  entryComponents: [ConfirmationDialogComponent, InputDialogComponent],
  providers: [{ provide: ErrorHandler, useClass: ErrorService }],
  bootstrap: [AppComponent],
})
export class AppModule {}

Example #18

Source File: signin.component.spec.ts From barista with Apache License 2.0

6 votes

describe('SigninComponent', () => {
  let component: SigninComponent;
  let fixture: ComponentFixture<SigninComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        AppMaterialModule,
        FormsModule,
        ReactiveFormsModule,
        HttpClientModule,
        AppComponentsModule,
        StoreModule.forRoot({}),
        EffectsModule.forRoot([]),
        EntityDataModule.forRoot(entityConfig),
        EntityStoreModule,
      ],
      declarations: [SigninComponent],
      providers: [AuthService],
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(SigninComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Example #19

Source File: app.module.ts From Angular-Cookbook with MIT License

6 votes

@NgModule({
  declarations: [
    AppComponent,
    VersionControlComponent,
    VcLogsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Example #20

Source File: app.module.ts From pantry_party with Apache License 2.0

6 votes

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        NativeScriptUISideDrawerModule,
        NativeScriptHttpClientModule,
        NativeScriptAnimationsModule,
        ReactiveFormsModule,
        NativeScriptFormsModule,
        NativeScriptMaterialBottomSheetModule.forRoot()
    ],
    declarations: [
        AppComponent,
        AppDrawerComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

Example #21

Source File: admin.module.ts From App with MIT License

6 votes

@NgModule({
	declarations: [
		AdminComponent,
		AdminUsersComponent,
		AdminReportsComponent,
		AdminModQueueComponent,
		AuditLogEntryComponent
	],
	imports: [
		CommonModule,
		UtilModule,
		ReactiveFormsModule,
		MaterialModule,
		AdminRoutingModule
	],
	exports: [
		AuditLogEntryComponent
	]
})
export class AdminModule { }

Example #22

Source File: calculator.module.ts From colo-calc with Do What The F*ck You Want To Public License

6 votes

@NgModule({
  imports: [
    CommonModule,
    FieldModule,
    FormsModule,
    HeroSelectDialogModule,
    ShareDialogModule,
    HelpDialogModule,
    CreditsDialogModule,
    PartyModule,
    PipesModule,
    MatSelectModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatIconModule,
    AttackOrderModule,
  ],
  declarations: [CalculatorComponent],
  exports: [CalculatorComponent]
})
export class CalculatorModule { }

Example #23

Source File: item-details.module.ts From VIR with MIT License

6 votes

@NgModule({
  declarations: [ItemDetailsComponent],
  imports: [
    CommonModule,
    MatButtonModule,
    MatIconModule,
    MatInputModule,
    MatFormFieldModule,
    FormsModule,
    ColorPickerModule,
    MatCheckboxModule,
    MatAutocompleteModule,
    ReactiveFormsModule,
    MatTooltipModule,
    MatDatepickerModule,
    MatSelectModule,
    MatButtonToggleModule,
  ],
  entryComponents: [ItemDetailsComponent],
  exports: [ItemDetailsComponent],
})
export class ItemDetailsModule {
}

Example #24

Source File: common-ui.module.ts From WowUp with GNU General Public License v3.0

6 votes

@NgModule({
  declarations: [
    ProgressSpinnerComponent,
    ProgressButtonComponent,
    ConfirmDialogComponent,
    AlertDialogComponent,
    AnimatedLogoComponent,
    ExternalUrlConfirmationDialogComponent,
    PatchNotesDialogComponent,
    ProgressButtonComponent,
    TelemetryDialogComponent,
    ConsentDialogComponent,
    CellWrapTextComponent,
    CenteredSnackbarComponent,
    ClientSelectorComponent,
    CurseMigrationDialogComponent,
    WebViewComponent,
  ],
  imports: [CommonModule, FormsModule, TranslateModule, MatModule, PipesModule, ReactiveFormsModule],
  exports: [
    ProgressSpinnerComponent,
    ProgressButtonComponent,
    ConfirmDialogComponent,
    AlertDialogComponent,
    AnimatedLogoComponent,
    ExternalUrlConfirmationDialogComponent,
    PatchNotesDialogComponent,
    ProgressButtonComponent,
    TelemetryDialogComponent,
    ConsentDialogComponent,
    CellWrapTextComponent,
    CenteredSnackbarComponent,
    ClientSelectorComponent,
    CurseMigrationDialogComponent,
    WebViewComponent,
  ],
})
export class CommonUiModule {}

Example #25

Source File: quantity-input.module.ts From nghacks with MIT License

6 votes

@NgModule({
  declarations: [QuantityInputComponent],
  imports: [
    CommonModule,
    MatButtonModule,
    MatIconModule,
    ReactiveFormsModule
  ],
  exports: [QuantityInputComponent]
})
export class QuantityInputModule { }

Example #26

Source File: auth.module.ts From ngx-admin-dotnet-starter with MIT License

6 votes

@NgModule({
  declarations: [...PIPES, ...COMPONENTS],
  imports: [
    AuthRoutingModule,
    ReactiveFormsModule,
    CommonModule,
    ComponentsModule,
    ...NB_MODULES,
    NbAuthModule.forRoot(authOptions),
  ],
  exports: [...PIPES],
  providers: [
    NbSecurityModule.forRoot({
      accessControl: authSettings,
    }).providers,
    {
      provide: NbRoleProvider, useClass: RoleProvider,
    },
    {
      provide: NbTokenLocalStorage, useClass: NbTokenLocalStorage,
    },
  ],
})
export class AuthModule {
  static forRoot(): ModuleWithProviders<AuthModule> {
    return {
      ngModule: AuthModule,
      providers: [
        { provide: NB_AUTH_TOKEN_INTERCEPTOR_FILTER, useValue: filterInterceptorRequest },
        { provide: HTTP_INTERCEPTORS, useClass: NbAuthJWTInterceptor, multi: true },
        { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
        ...GUARDS],
    };
  }
}

Example #27

Source File: date-picker.module.ts From alauda-ui with MIT License

6 votes

@NgModule({
  imports: [
    CommonModule,
    InputModule,
    ButtonModule,
    TooltipModule,
    ReactiveFormsModule,
    FormsModule,
    TimePickerModule,
    IconModule,
    I18nModule,
  ],
  declarations: [...COMPONENTS],
  exports: [...COMPONENTS],
})
export class DatePickerModule {}

Example #28

Source File: shared.module.ts From alura_angular_rxjs_1 with MIT License

6 votes

@NgModule({
  imports: [
    CommonModule,
    PoModule,
    MessagesModule,
    NoDataModule,
    ReactiveFormsModule,
    AuthorizationModule,
  ],
  exports: [
    PoModule,
    MessagesModule,
    NoDataModule,
    ReactiveFormsModule,
    AuthorizationModule,
  ],
})
export class SharedModule {}

Example #29

Source File: todo-search-form.component.spec.ts From angular-padroes-e-boas-praticas with MIT License

6 votes

describe('TodoSearchFormComponent', () => {
  let component: TodoSearchFormComponent;
  let fixture: ComponentFixture<TodoSearchFormComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ TodoSearchFormComponent ],
      imports: [ ReactiveFormsModule ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TodoSearchFormComponent);
    component = fixture.componentInstance;
    component.todoSearchForm = new FormControl();
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('todoSearchForm should be valid', () => {
    expect(component.todoSearchForm).toBeTruthy();
  });
});