值不会在角度2上的onSubmit上发布

Question

详细

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

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

中添加此代码

Answer 2

我认为问题是由将字段设置为只读引起的。首先，尝试删除该属性，然后查看它是否起作用。如果是这样，则需要使用yourformcontrol.getRawValue（）获取值。看看文档[这里]。1