Topic: Input not working in angular 4

badillo free asked 7 years ago


Hi all. I´m install MDB for Angular 4 with the following link : https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design. But the inputs not working, for example: placeholder over title or when I press input title not move.   Thanks

Adrian Sawicki free answered 7 years ago


It looks like you copied something from mdb jQuery, not Angular. The reason why I'm writing this is that you hadn't use any angular directive. If you want to have your label jump up you have to use mdbActive directive. Check Angular docs for more information :).

badillo free commented 7 years ago

Good morning. It's right. I'll try as you say. Thank's.

badillo free commented 7 years ago

Hi Adrian. Now download mbd for angular, but at the moment of running the instruction (ng serve), Show me the following message. ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader !./~/sass-loader!./~/angular-bootstrap-md/scss/mdb.scss Module build failed: @import "./angular/mdb-angular-free"; ^ File to import not found or unreadable: ./angular/mdb-angular-free. Parent style sheet: stdin in C:\Users\Downloads\mdb-angular-free-4.3.0\node_modules\a ngular-bootstrap-md\scss\mdb.scss (line 64, column 1) @ ./~/angular-bootstrap-md/scss/mdb.scss 4:14-162 @ multi ./~/font-awesome/scss/font-awesome.scss ./~/angular-bootstrap-md/scss/b ootstrap/bootstrap.scss ./~/angular-bootstrap-md/scss/mdb.scss ./src/styles.scss Rewards.

badillo free commented 7 years ago

Excuse me. I find solution: In mdb.scss change line @import "./angular/mdb-angular-free"; to @import "angular/mdb-angular"; Thanks

badillo free answered 7 years ago


Sorry but still not working. Now download here: https://mdbootstrap.com/angular/angular-bootstrap-getting-started/ And install with: https://mdbootstrap.com/angular/5min-quickstart/ But the effects on inpusts and buttons works Thanks

badillo free commented 7 years ago

Hi all. I solved the error. I wrote badly "mdbActive" change for "mdbActiv". Thanks.

badillo free answered 7 years ago


Hi, good morning. Thank's for you answer.   I test other way install angular with MDB but I see but I see the same result. The link: https://mdbootstrap.com/angular/5min-quickstart/  . I followed the prerequisite steps and installation steps 1 to 4, but not work. My code.

app.component.html:

<div class="row text-left"> <!--Grid column--> <div class="col-md-3 mb-r"> <!--Form without header--> <div class="card"> <div class="card-body"> <!--Header--> <div class="text-center cyan-text"> <h3><i class="fa fa-lock cyan-text"></i> Login:</h3> <hr class="my-4"> </div> <!--Body--> <div class="md-form"> <i class="fa fa-envelope prefix grey-text"></i> <input type="text" id="cyanForm-email" class="form-control"> <label for="cyanForm-email">Your email</label> </div> <div class="md-form"> <i class="fa fa-lock prefix grey-text"></i> <input type="password" id="cyanForm-pass" class="form-control"> <label for="cyanForm-pass">Your password</label> </div> <div class="text-center"> <button class="btn btn-info">Login</button> </div> </div> <!--Footer--> <div class="modal-footer"> <div class="options"> <p>Not a member? <a href="#">Sign Up</a></p> <p>Forgot <a href="#">Password?</a></p> </div> </div> </div> <!--/Form without header--> </div>

app.module.ts:

import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { MDBBootstrapModule } from './typescripts/angular-bootstrap-md/free'; import { AgmCoreModule } from '@agm/core'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, FormsModule, HttpModule, MDBBootstrapModule.forRoot() ], providers: [], bootstrap: [AppComponent], schemas: [NO_ERRORS_SCHEMA] }) export class AppModule { }       Thank's

Adrian Sawicki free answered 7 years ago


Hello,

Could you show me your code? You've made proper imports? I've checked it and everything works fine for me.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags