Angular 6注册表未发送

Question

我正在做一个项目，一个asp.net angular 6项目，并试图包括一个注册和登录表单。到目前为止，我的登录表单工作正常，但是当我按下注册按钮时，我的注册表单没有任何作用。我正在遵循我的登录表单中的相同逻辑，我想知道是否有人可以指出为什么它不工作。

register.component.html

<div class="container card" style="width:40rem;">
  <div class="row justify-content-center card-header bg-primary" >
    <div class="col">
      <h2 class="text-center text-white mb-4">Register</h2>
    </div>
  </div>
  <div class="row justify-content-center card-body mt-2">
    <div class="col-6">
      <form (ngSubmit)="onRegister()" [formGroup]="registerForm">
        <div class="form-row">
          <div class="col">
            <label>
              First name
              <input class="form-control" type="text" formControlName="firstName"/>
            </label>
            <span class="help-block text-danger" *ngIf="registerForm.get('firstName').touched && registerForm.get('firstName').invalid">First name is required.</span>
          </div>
          </div>
          <div class="form-row">
          <div class="col">
            <label>
              Last name
              <input class="form-control" type="text" formControlName="lastName"/>
            </label>
            <span class="help-block text-danger" *ngIf="registerForm.get('lastName').touched && registerForm.get('lastName').invalid">Last name is required.</span>
          </div>
        </div>
        <div class="form-row">
          <div class="col">
            <label>
              Address
              <input class="form-control" type="text" formControlName="address"/>
            </label>
            <span class="help-block text-danger" *ngIf="registerForm.get('address').touched && registerForm.get('address').invalid">Address is required.</span>
          </div>
        </div>
        <div class="form-row">
          <div class="col">
            <label>
              E-mail
              <input type="email" class="form-control" formControlName="email"/>
            </label>
            <span class="help-block text-danger" *ngIf="registerForm.get('email').touched && registerForm.get('email').invalid">Email is required and must be a valid email address.</span>
          </div>
        </div>
        <div class="form-row">
          <div class="col">
            <label>
              Date of Birth
              <input type="date" class="form-control" formControlName="dateOfBirth"/>
            </label>
            <span class="help-block text-danger" *ngIf="registerForm.get('dateOfBirth').touched && registerForm.get('dateOfBirth').invalid">Date of birth is required.</span>
          </div>
        </div>
        <div class="form-row">
          <div class="col">
            <label>
              Password
              <input type="password" class="form-control" formControlName="password"/>
            </label>
              <span class="help-block text-danger" *ngIf="registerForm.get('password').touched && registerForm.get('password').invalid">
                <span *ngIf="registerForm.get('password').errors['passwordComplexity']" class="help-block d-block">The password needs to start with a letter and contain a number and a special character.</span>
                <span *ngIf="registerForm.get('password').errors['passwordLength']" class="help-block d-block">The password must be at least 8 characters long.</span>
              </span>
          </div>
        </div>
        <div class="form-row">
          <div class="col">
            <label>
              Security question
              <select class="form-control" formControlName="securityQuestion">
                <option *ngFor="let question of securityQuestions" value="{{question.id}}">{{question.question}}</option>
              </select>
            </label>
            <span class="help-block text-danger" *ngIf="registerForm.get('securityQuestion').touched && registerForm.get('securityQuestion').invalid">Answer to security question is required</span>
          </div>
        </div>
        <div class="form-row">
          <div class="col">
            <label>
              Answer to security question
              <input type="text" class="form-control" formControlName="securityAnswer"/>
            </label>
            <span class="help-block text-danger" *ngIf="registerForm.get('securityAnswer').touched && registerForm.get('securityAnswer').invalid">Answer to security question is required</span>
          </div>
        </div>
        <div class="form-row">
          <div class="col text-right">
            <button  class="btn btn-primary mr-2" [disabled]="registerForm.invalid">
              Sign up
            </button>
            <a class="mr-2" [routerLink]="['/account']">
              <button class="btn btn-warning">
                Cancel
              </button>
            </a>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

register.component.ts

import {Component, OnInit} from "@angular/core";
import {FormControl, FormGroup, Validators} from "@angular/forms";
import {MessageService} from "../../services/message.service";
import {ApiMethod, ApiService} from "../../services/api.service";
import {PasswordValidator} from "../../shared/validators/password.validator";
import {User, UserUpdateResult} from "../../shared/user-model";
import {HttpClient} from "@angular/common/http";
import {SecurityQuestion} from "../../shared/security.question.model";

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit{
  public securityQuestions: SecurityQuestion[] = [];
  public registerForm: FormGroup = new FormGroup({
    firstName: new FormControl(null, Validators.required),
    lastName: new FormControl(null, Validators.required),
    address: new FormControl(null, Validators.required),
    email: new FormControl(null, [Validators.email, Validators.required]),
    dateOfBirth: new FormControl(null, Validators.required),
    password: new FormControl(null, [Validators.required, PasswordValidator.Length, PasswordValidator.Complexity]),
    securityQuestion: new FormControl(1, Validators.required),
    securityAnswer: new FormControl(null, [Validators.required]),
  });

  constructor(public messageService: MessageService,
              public apiService: ApiService,
              public httpClient: HttpClient){}

  ngOnInit(): void {
    this.httpClient.get(this.apiService.getUrl(ApiMethod.GetSecurityQuestions)).subscribe((questions: SecurityQuestion[]) => {
      this.securityQuestions = questions;
    })
  }

  public onRegister(){
    const user = new User();

    user.fullName = this.registerForm.value.firstName + ' ' + this.registerForm.value.lastName;
    user.password = this.registerForm.value.password;
    user.email = this.registerForm.value.email;
    user.address = this.registerForm.value.address;
    user.dateOfBirth = new Date(this.registerForm.value.dateOfBirth);

    const securityQuestion = new SecurityQuestion();
    securityQuestion.id = this.registerForm.value.securityQuestion;
    securityQuestion.answer = this.registerForm.value.securityAnswer;
    user.securityQuestion = securityQuestion;

    this.httpClient.post(this.apiService.getUrl(ApiMethod.UserSelfRegister), user).subscribe((result: UserUpdateResult) => {
      if(result == UserUpdateResult.UsernameTaken){
        this.messageService.error('User cannot be created', 'This user is already registered.');
        return;
      }
      this.messageService.success('User registered', 'Waiting for activation. Please check your inbox for an email once your account has been activated.');
      this.registerForm.reset();
    });
  }

}

Answer 1

在button标签中添加type="submit"

<button  type="submit" class="btn btn-primary mr-2" [disabled]="registerForm.invalid">
     Sign up
</button>

Answer 2

您可以将type="submit"添加到button标记中，也可以从form标记中删除(ngSubmit)="onRegister()"并将(click)="onRegister()"添加到button标记中。