typescript - 值未以 Angular 2 发布在 onSubmit 上

Question

详情

我正在尝试发布一个表单。在此表单中，有 4 个字段 Email、First Name、Last Name 和 Password。现在，当我转到此 URL https://localhost:44300/Portal/register?invitekey=5e331c6176e24d3080f28b82a7a62f7a&email=donal@gmail.com 时，我现在通过从 url 获取它来预填充电子邮件字段禁用。现在，当加载表单并填写剩余值并单击注册按钮时，数据已发布，但在这种情况下电子邮件字段为空。但是当我编辑这封电子邮件时，它成功发布了所有数据。我不知道这段代码有什么问题。以下是代码

html

<div class="wrapper">
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">
                <form [ngFormModel]="registerForm" (ngSubmit)="onRegister(registerForm.value)" class="reg-page">
                    <input id="xss" type="hidden" name="idsrv.xsrf" token="model.antiForgery">
                    <div class="reg-header">
                        <h2>Register User</h2>
                    </div>
                    <div *ngIf="isError === true" class="alert alert-danger">
                        {{error}}
                    </div>
                    <div class="input-group margin-bottom-20">
                        <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                        <input type="email" class="form-control" [value]="email" id="username" placeholder="Email" autofocus
                               [ngFormControl]="registerForm.controls['email']" 
                               #username="ngForm" />
                    </div>
                    <div class="input-group margin-bottom-20">
                        <span class="input-group-addon"><i class="fa fa-user"></i></span>
                        <input type="text" class="form-control" id="firstName" placeholder="First Name" autofocus
                               [ngFormControl]="registerForm.controls['firstName']"
                               #firstName="ngForm" required/>
                    </div>
                    <div class="input-group margin-bottom-20">
                        <span class="input-group-addon"><i class="fa fa-user"></i></span>
                        <input type="text" class="form-control" id="lastName" placeholder="Last Name" autofocus
                               [ngFormControl]="registerForm.controls['lastName']"
                               #lastName="ngForm" required/>
                    </div>
                    <div class="input-group margin-bottom-20">
                        <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                        <input type="password" class="form-control" id="password" placeholder="Password" autofocus
                               [ngFormControl]="registerForm.controls['password']"
                               #password="ngForm" required/>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                        </div>
                        <div class="col-md-6">
                            <button [disabled]="!registerForm.valid" class="btn-u pull-right" type="submit">Register</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<style>
    .ng-valid[required] {
        background: #ceedce !important;
    }

    .ng-invalid {
        background: #fff0e0 !important;
    }

    .ng-pristine {
        background: #FFFFFF !important;
    }
</style>

组件

import { Component } from '@angular/core';
import { NgForm }    from '@angular/forms';
import { FORM_PROVIDERS, ControlGroup, FormBuilder, Validators } from '@angular/common';
import { Inject } from '@angular/core';
import {  Router, ActivatedRoute } from  '@angular/router';
import { OnInit, OnDestroy } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import {UserService} from '../../services/user.service';
import { AuthService } from '../../services/auth/auth.service';


@Component({
    selector: 'register-user',
    templateUrl: '/app/components/user/register-user.html'
})
export class RegisterUserComponent implements OnInit {

    registerForm: ControlGroup;
    private sub: any;
    private inviteKey: string    
    private email: string
    private _data: Observable<any[]>;
    private input: boolean;
    constructor(
        @Inject(Router) private router: Router,
        @Inject(ActivatedRoute) private route: ActivatedRoute,
        @Inject(FormBuilder) private formBuilder: FormBuilder,
        @Inject(UserService) private _userService: UserService,
        @Inject(AuthService) public authService: AuthService    ) {

        this.creatForm();
    }
    creatForm() {
        this.registerForm = this.formBuilder.group({
            'email': [''],
            'firstName': ['', Validators.required],
            'lastName': ['', Validators.required],
            'password': ['', Validators.required]
        });
    }
    ngOnInit() {
        this.router
            .routerState
            .queryParams
            .subscribe(params => {
                this.inviteKey = params['invitekey'];
                this.email = JSON.stringify(params['email']).replace(/"/g,"");
            });

        this._userService.handleInvite(this.inviteKey, this.email)
            .subscribe((data => {
                this._data = data;
            }),
            err => {
                console.log(err);
                if (err == "" || err == undefined) err = "Unable to Register."
            });

        console.log(this.email);
    }
    onRegister(value) {
        console.log("register form submitted");
        if (this.registerForm.valid) {
            this._userService.registerUser(value)
                .subscribe((data => {
                    console.log(data);
                    this._data = data;
                    let redirect = this.authService.redirectUrl ? this.authService.redirectUrl : '/login';
                    this.router.navigate([redirect]);
                }),
                    error => {
                        console.log("error while register User");
                        this._userService.handleError(error);
                    }
                );
        }
        else {
            console.log("Form is invalid");
        }

    }
    ngOnDestroy() {
        //this.sub.unsubscribe();
    }
}

图片

Answer 1

在 ngOnInIt (<Control>this.registerForm.controls['email']).updateValue(this.email); 中添加这行代码