Question

我是使用Typescript的新手，我对这段代码很生气。我正在编写一个非常简单的登录表单（在示例下面，但考虑它只是整个表单的一部分），但username字段在表单中没有绑定到{{1}数据，而login.Username字段外部表单正常工作。

所以当我加载页面时，我得到第一个填充数据的字段（当我输入内容时变量内部的数据发生变化），而表单内的字段仍为空。

我确定这是愚蠢的，但我不能让它发挥作用。

username

我还附加了html无效的组件

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

LoginInfo 类

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); }
}

Answer 1

您缺少一个名称属性，该属性应该存在于name="user"之类的表单中的表单控件中。那么你可以试试下面的标记

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

表单字段与typescript变量无关

1 个答案: