Input not working in angular 4


Topic: Input not working in angular 4

badillo 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
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 commented 7 years ago

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

badillo 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 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

Hello,

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


badillo 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

badillo 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 commented 7 years ago

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

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
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No