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

如果您想在Submit上显示错误，请尝试这种方式

 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

Answer 2

您需要检查touch属性

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

Onclick表单无法验证

2 个答案: