Question

我正在创建角度6的角度形式。现在的问题是，即使在应用验证之后，它也直接将我带到下一个组件。验证不适用于任何Input。以下是FormComponent.Html代码和打字稿代码在下面给出。

<div class="jumbotron">
<div class="container">
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <h3>Please fill following information</h3>
            <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
                <div class="form-group">
                    <label>First Name</label>
                    <input type="text" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }"
                    />
                    <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
                        <div *ngIf="f.firstName.errors.required">First Name is required</div>
                    </div>
                </div>
                <div class="form-group">
                    <label>Last Name</label>
                    <input type="text" formControlName="lastName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.lastName.errors }"
                    />
                    <div *ngIf="submitted && f.lastName.errors" class="invalid-feedback">
                        <div *ngIf="f.lastName.errors.required">Last Name is required</div>
                    </div>
                </div>

                <div class="form-group">
                    <label>Email</label>
                    <input type="text" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.email.errors }"
                    />
                    <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
                        <div *ngIf="f.email.errors.required">Email is required</div>
                        <div *ngIf="f.email.errors.email">Email must be a valid email address</div>
                    </div>
                </div>
                <div class="form-group">
                    <label>Contact</label>
                    <input type="text" formControlName="contact" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.contact.errors }"
                    />
                    <div *ngIf="submitted && f.contact.errors" class="invalid-feedback">
                        <div *ngIf="f.contact.errors.required">Email is required</div>
                        <div *ngIf="f.contact.errors.required">Invalid contact</div>
                    </div>
                </div>
                <div class="form-group">
                    <label>Password</label>
                    <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }"
                    />
                    <span class="glyphicon glyphicon-eye-open" (click)="showPassword()"></span>
                    <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
                        <div *ngIf="f.password.errors.required">Password is required</div>
                        <div *ngIf="f.password.errors.minlength">Password must be at least 6 characters</div>
                    </div>
                </div>
                <div class="form-group">
                    <label>ReEnter-Password</label>
                    <input type="password" formControlName="retypePassword" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.retypePassword.errors }"
                    />
                    <span class="glyphicon glyphicon-eye-open" (click)="showConfirmPassword()"></span>
                    <div *ngIf="submitted && f.retypePassword.errors" class="invalid-feedback">
                        <div *ngIf="f.retypePassword.errors.required">Password is required</div>
                        <div *ngIf="f.retypePassword.errors.minlength">Password must be at least 6 characters</div>
                        <div *ngIf="f.retypePassword" !="f.password">Password must be same</div>
                    </div>
                </div>
                <div class="form-group">
                    <button class="btn btn-primary">Register</button>
                </div>
            </form>
        </div>
    </div>
</div>
</div>

紧随其后的是FormComponent.ts。没有错误，但仍然无法验证。

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
registerForm: FormGroup;
submitted = false;
data;
   myPassword = "password";
  confirmPassword = "password";

   constructor(private formBuilder: FormBuilder, private route: Router) { }
 showPassword() {
  if (this.myPassword == "text") {
  this.myPassword = "password";
  }
  else {
  this.myPassword = "text";
  }
  }
   showConfirmPassword() {
  if (this.confirmPassword == "text") {
  this.confirmPassword = "password";
  }
  else {
   this.confirmPassword = "text";
   }
 }


ngOnInit() {
this.data = JSON.parse(localStorage.getItem("data"));
this.registerForm = this.formBuilder.group({
  firstName: ['', Validators.required],
  lastName: ['', Validators.required],
  email: ['', [Validators.required, Validators.email]],
  password: ['', [Validators.required, Validators.minLength(6)]],
  retypePassword: ['', [Validators.required, Validators.minLength(6)]],
  contact: ['', [Validators.required, Validators.minLength(10)]]
});

if (this.data) {
  this.registerForm.patchValue({
    firstName: this.data.firstName,
    lastName: this.data.lastName,
    email: this.data.email,
    contact: this.data.contact,
    password: this.data.password,
    retypePassword: this.data.retypePassword

  });
  }

 }


get f() { return this.registerForm.controls; }

onSubmit() {
this.submitted = true;
this.route.navigate(["/show-details"])

// stop here if form is invalid
if (this.registerForm.invalid) {
  return;
}

localStorage.setItem("data", JSON.stringify(this.registerForm.value));
}

}

Answer 1

我认为问题出在这里

onSubmit() {
  this.submitted = true;
  // put this line AFTER the invalid check:
  // this.route.navigate(["/show-details"]);

  // stop here if form is invalid
  if (this.registerForm.invalid) {
    return;
  }

  // HERE:
  this.route.navigate(["/show-details"]);

  localStorage.setItem("data", JSON.stringify(this.registerForm.value));
}

Answer 2

您应该在浏览之前检查表单状态。 ts文件可以进行如下修改。

- (void)viewDidLoad{
    [super viewDidLoad];
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(showDetailTargetDidChange:) name:UIViewControllerShowDetailTargetDidChangeNotification object:self.splitViewController];
}

- (void)showDetailTargetDidChange:(NSNotification *)notification{
    // changed from collapsed to expanded or vice versa
}

您甚至可以阻止用户在没有适当表单数据的情况下提交表单。您可以使用按钮仅针对有效输入获得启用。

onSubmit() {
this.submitted = true;
if (this.registerForm.invalid) {
   return;
 }else {
   this.route.navigate(["/show-details"]);
   localStorage.setItem("data", JSON.stringify(this.registerForm.value));
 }
}

验证不适用于角度

2 个答案: