CODEWITHSUNDEEP
javascriptangulartypescript
Marco
Marco

Reputation: 57583

Form field not tied to typescript variable

I'm a newbie with Typescript and I'm going mad with this piece of code. I'm writing a very simple login form (below a sample, but consider it's just part of the whole form), but username field inside form is not tied to the login.Username data, while username field outside form works properly.

So what happens is that when I load the page I get the first field filled with data (and data changes inside variable when I type something), while the field inside form remains empty.

I'm sure it's something stupid, but I can't make it work.

{{diagnostic}}

<input class="form-control" type="text"
    required placeholder="Username"
    minlength="7" maxlength="8"
    [(ngModel)]="login.Username"/>

<form #loginForm="ngForm" (submit)="doLogin()">
    <input class="form-control" type="text"
        required placeholder="Username"
        minlength="7" maxlength="8"
        [(ngModel)]="login.Username"/>
</form>

I also attach the component whose html is not working

import {Component, OnInit} from '@angular/core';
import {Router, NavigationExtras} from '@angular/router';

import {AuthService} from '../services/auth.service';
import {LoginInfo} from "../classes/LoginInfo";

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css'],
    providers: [],
})
export class LoginComponent implements OnInit {

    constructor(public authService: AuthService, public router: Router) {
    }

    ngOnInit() {
        this.login = new LoginInfo('john', 'pwd');
        this.message = '';
    }

    public login: LoginInfo;
    public message: string;


    doLogin() {
        this.message = this.login.isValidInfo() ? 'OK' : "ERRORE";
        alert('test');
        //this.router.navigateByUrl('/scheduler');
    }

    get diagnostic() { return JSON.stringify(this.login); }
}

LoginInfo class

export class LoginInfo {

    public Username: string;
    public Password: string;
    public Stato: number;
    public Messaggio: string;

    constructor(user: string, pwd: string) {
        this.Username = user;
        this.Password = pwd;
        this.Stato = 0;
        this.Messaggio = '';
    }

    public isValidInfo() {
        return this.Username && this.Username != '' && 
               this.Password && this.Password != '';
    }
}

Upvotes: 1

Views: 273

Answers (1)

Niladri
Niladri

Reputation: 5962

you are missing a name property that should be present in the form-control inside a form like name="user". So can you try with the below markup

<form #loginForm="ngForm" (submit)="doLogin()">
    <input class="form-control" type="text"
        required placeholder="Username"
        minlength="7" maxlength="8" name="user"
        [(ngModel)]="login.Username"/>
</form>

Upvotes: 1

Related Questions