Форма Onclick не проверяется

Я создаю форму с полями Name, Email, Password. Мой код указан ниже

<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 в поле и удалении данных он показывает ошибку.

Но мое намерение, когда я нажимаю кнопку регистрации, должно проверить все