Question

.net核心的完整初学者和角度在这里;遇到一些困难。我有一个注册表格，里面有几个文本框。尝试编写angular4代码，该代码将获取用户提供的值并将其保存到数据库中。现在，我有控制台错误 - 无法读取未定义的值'email' 看起来它无法从输入文本框中读取值。

我的html块 -

    <form #regForm="ngForm" >
    <div class="row">
        <div class="col-sm-6">
            <input class="simple-article" #email type="text" name="email" value="" ([ngModel])="model.email" placeholder="Your email" />
        </div>

    </div>

    <div class="row" style="margin-top:9px">
        <div class="col-sm-6">
            <input class="simple-article" type="password" #password value="" ([ngModel])="model.password" name="password" placeholder="Enter password" />
        </div>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <label class="checkbox-entry">
                <input type="checkbox" #agree ([ngModel])="model.agree" required name="agree" />
                <span>I agree to the <u><a href="#">Privacy Policy</a></u></span>
            </label>
        </div>

    </div>

    <div class="row">
        <div class="col-sm-6">
            <a class="btn-success" (click)="onRegClicked(email.value, password.value, agree.checked)">
                Register
            </a>
        </div>
    </div>
</form>

我的角度代码 -

export class RegistrationComponent implements OnInit {

    model: { email: 'NONE', password: 'NONE', agree: false };
    validEmail: boolean = true;
    errors: any;
    isRequesting: boolean;
    submitted: boolean = false;

    constructor(private router: Router, private cd: ChangeDetectorRef, private confService: ConfigService, private common: CommonFunctionsService, private appService: AppService) { }

    ngOnInit() {

    }

    onRegClicked(email: string, password: string, agree: boolean) {
        if (this.common.hasValue(email) && this.common.hasValue(password)) {
            if (!agree) {
                alert('You must agree to register!');
                return;
            }
            let user = <UserRegistration>{
                email: email,
                password: password
            };

            this.registerUser({ value: user, valid: true });

        }
        else {
            alert('Please fill out all the fields!');
            return;
        }
    }

    registerUser({ value, valid }: { value: UserRegistration, valid: boolean }) {

        this.validEmail = true;
        this.submitted = true;
        this.isRequesting = true;
        this.errors = '';

        if (valid) {
            this.appService.register(value.email, value.password, 0)
                .take(1)
                .finally(() => this.isRequesting = false)
                .subscribe(
                (result: any) => {
                    if (result.success) {
                        //this.appService.Ulogin(value.email, value.password);
                        this.validEmail = true;
                    }
                    else {
                        this.validEmail = false;
                    }
                },
                (errors: any) => this.errors = errors
                );

        }
    }
}

和commonFunctionsService是 -

export class CommonFunctionsService {

    constructor() { }

    hasValue(str: string) {
        return str !== undefined && str !== null && str !== '';
    }

    copyObjectFromTo(obj1: any, obj2: any) {
        Object.keys(obj1).forEach((key) => {
            obj2[key] = obj1[key];
        });
    }

    trimIfGreaterThan(str: string, maxLength: number) {
        if (str.length > maxLength)
            return str.substring(0, maxLength) + '..';
        else
            return str;
    }

    getEmailUserName(email: string) {
        return email.substring(0, email.indexOf('@'));
    }

    getUtcNow(): Date {
        var now = new Date();
        return new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds());
    }
}

我写的上述代码中的错误在哪里？最初我在表单中没有验证，但我也删除了它。仍然没有运气。 onRegClicked是应该选择提供给文本框的值的函数。

Answer 1

传递html中的model.email

 <a class="btn-success" (click)="onRegClicked(model.email, model.password, agree.checked)">

Answer 2

您应该能够将方法签名缩短为：

onRegClicked() {
    ...

并使用

引用变量

this.model.email
this.model.password
this.model.agree

会让HTML更清洁：

<a class="btn-success" (click)="onRegClicked()">

否则，请通过在HTML中的每个参数前添加model.来解决您的问题：

<a class="btn-success" (click)="onRegClicked(model.email, model.password, model.agree)">

找不到undefined的值电子邮件 - angular4和.net核心

2 个答案: