Onclick 表单未验证

Question

我正在创建具有Name, Email, Password 字段的表单。下面提到了我的代码

signup.html

<form class="form-horizontal form-material" id="loginform" [formGroup]="registrationform" novalidate>
    <h3 class="box-title m-b-20">Sign Up</h3>
    <div class="form-group">
        <div class="col-xs-12">
            <input class="form-control" required="" type="text" placeholder="Name" formControlName="name">
        </div>
    </div>
    <div *ngIf="registrationform.controls['name'].invalid && (registrationform.controls['name'].dirty )" class="alert alert-danger">
        <div *ngIf="registrationform.controls['name'].errors.required">
            Name should consist 3 Characters
        </div>
    </div>
    <div class="form-group ">
        <div class="col-xs-12">
            <input class="form-control" required="" type="text" placeholder="Email" formControlName="email">
        </div>
    </div>
    <div *ngIf="registrationform.controls['email'].invalid && (registrationform.controls['email'].dirty )" class="alert alert-danger">
        <div *ngIf="registrationform.controls['email'].errors.required">
            Please Enter Valid Email
        </div>
    </div>
    <div class="form-group ">
        <div class="col-xs-12">
            <show-hide-password size="md" icon="entypo">
                <input type="password" name="password" placeholder="Password" formControlName="password">
            </show-hide-password>
            <!-- <input  class="form-control" required="" type="password" placeholder="Password"> -->
            <!-- <button (click)="x.type=x.type=='password'?'text':'password'">Show password</button> -->
        </div>
    </div>
    <div *ngIf="registrationform.controls['password'].invalid && (registrationform.controls['password'].dirty )" class="alert alert-danger">
        <div *ngIf="registrationform.controls['password'].errors.required">
            Name should consist 3 Characters
        </div>
    </div>
    <div class="form-group text-center p-b-20">
        <div class="col-xs-12">
            <!-- <a [routerLink]="['/authentication/login']" class="btn btn-info btn-lg btn-block btn-rounded text-uppercase waves-effect waves-light">Sign Up</a> -->
            <button type="submit" class="btn btn-info btn-lg btn-block btn-rounded text-uppercase waves-effect waves-light">Sign Up</button>
        </div>
    </div>
    <div class="form-group m-b-0">
        <div class="col-sm-12 text-center">
            Already have an account?
            <a class="text-info m-l-5" [routerLink]="['/authentication/login']">
                <b>Sign In</b>
            </a>
        </div>
    </div>
</form>

我的signup.ts在下面

export class Signup2Component implements OnInit {
    registrationform: FormGroup;
    emailPattern = "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$";
    constructor(private form: FormBuilder) {
        // this.emailPattern = "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$";
        this.registrationFormValidation();
    }

    ngOnInit() { }

    registrationFormValidation() {
        this.registrationform = this.form.group({
            name: ['', Validators.compose([Validators.required, Validators.minLength(3)])],
            email: ['', Validators.compose([Validators.required, Validators.pattern(this.emailPattern)])],
            password: ['', Validators.compose([Validators.required, Validators.minLength(5)])]
            // password:['',Validators.required,Validators.minLength(5)]
        })
    }
}

一旦我点击注册按钮而不在文件中输入数据，它就无法验证，即使我也签入console。但是当在字段中输入 I 数据并删除数据时，它会显示错误。

但我的意图是，一旦我点击注册按钮，它应该验证一切

Answer 1

你需要检查触摸属性

 <div *ngIf="registrationform.controls['email'].touched && registrationform.controls['email'].invalid" class="fx-validation-error">
                    <div *ngIf="registrationform.controls['email'].errors.required">
                                  Please Enter Valid Email
                    </div>
  </div>

你应该需要提交这样的表格

<form [formGroup]="form" (ngSubmit)="save()">

    <div class="row">
        <div class="form-group col-12">
            <button type="submit" class="fx-btn-primary pull-right" [disabled]="!form.valid">Add</button>
        </div>
    </div>

    <div class="row">
        <div class="col-4">

            <div class="form-group">
                <label for="name" class="fx-form-label">
                    <span class="fx-required">* </span>Name</label>
                <input type="text" formControlName="name" id="name" name="name" class="form-control fx-form-control" autocomplete="off">
                <div *ngIf="name.touched && name.invalid" class="fx-validation-error">
                    <div *ngIf="name.errors.required">Name field is required.</div>
                </div>
            </div>

        </div>
    </div>
</form>

Answer 2

如果你想在提交时显示错误试试这种方式

 registrationform: FormGroup;
   submitted=false;
    emailPattern = "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$";
    constructor(private form: FormBuilder) {
        // this.emailPattern = "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$";
        this.registrationFormValidation();
    }    
    ngOnInit() { }
    registrationFormValidation() {
        this.registrationform = this.form.group({
            name: ['', Validators.compose([Validators.required, Validators.minLength(3)])],
            email: ['', Validators.compose([Validators.required, Validators.pattern(this.emailPattern)])],
            password: ['', Validators.compose([Validators.required, Validators.minLength(5)])]
            // password:['',Validators.required,Validators.minLength(5)]
        })
    }

    onSubmit(){
       this.submitted=true;
    }

例如：https://stackblitz.com/edit/angular-6-reactive-form-validation-cbsncp