Form validation using angular 2

Question

Angular 2 form validation is not working, I can not find where I did mistake. Please help me how to resolve this issue.

https://stackblitz.com/edit/angular-6-reactive-form-validation-jb2snp?file=app/app.component.ts

app.component.ts:

      this.registerForm = this.formBuilder.group({
        userType: ['', Validators.required],
        modalType: ['', Validators.required],
        place: ['', Validators.required], 
        onebhk: ['', Validators.required],
        twobhk: ['', Validators.required],
        min: ['', [Validators.required, Validators.minLength(3)]],
        max: ['', [Validators.required, Validators.minLength(6)]]
    });

Are there any erros in the console?

Anuradha Gunasekara
– Anuradha Gunasekara

2018-09-03 09:42:27 +00:00
Commented Sep 3, 2018 at 9:42 — Anuradha Gunasekara
– Anuradha Gunasekara, Commented Sep 3, 2018 at 9:42

Aniket Avhad · Accepted Answer · 2018-09-03 09:43:40Z

2

problem in your html, for radio button you have to you formControlName and name should be same

like this,

<div class="col-md-4">
      <label>
          <input type="radio" formControlName="onebhk" name="onebhk" value="yes" /> 1 BHK
       </label>
       <label>
          <input type="radio" formControlName="twobhk" name="twobhk" value="no" /> 2 BHK
        </label>
  </div>

answered Sep 3, 2018 at 9:43

Aniket Avhad

4,1453 gold badges25 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Krishna Rathore · Accepted Answer · 2018-09-03 09:47:16Z

1

remove name attribure fom this control name="onebhk" and name="twobhk"

<div class="col-md-4">
      <label>
          <input type="radio" formControlName="onebhk" value="yes" /> 1 BHK
      </label>
      <label>
          <input type="radio" formControlName="twobhk" value="no" /> 2 BHK
      </label>
</div>

answered Sep 3, 2018 at 9:47

Krishna Rathore

9,7375 gold badges28 silver badges50 bronze badges

Comments

Akj · Accepted Answer · 2018-09-03 10:55:34Z

You should not use name and formControlName together:

DEMO

Image Of Solution

HTML:

<!-- main app container -->
<div class="jumbotron">
    <div class="container">

        <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">

            <div class="row show-grid">
                <div class="col-md-8 border">

                    <div class="row">
                        <div class="col-md-5">
                            <div class="form-group">
                                <label>Flat Name:</label>
                                <select id="type" formControlName="userType" class="form-control">
                                    <option value="null">Select</option>
                                    <option *ngFor="let userType of userTypes">{{userType}}</option>
                                </select>

                                <p style="color:red" *ngIf="registerForm.get('userType').hasError('required') && registerForm.get('userType').touched"> Required</p>
                            </div>
                        </div>
                        <div class="col-md-5">
                            <div class="form-group">
                                <label>Modal</label>
                                <select id="type" formControlName="modalType" class="form-control">
                                    <option value="null">Select</option>
                                    <option *ngFor="let modalType of modalTypes">{{modalType}}</option>
                                </select>
                                <p style="color:red" *ngIf="registerForm.get('modalType').hasError('required') && registerForm.get('modalType').touched">
                                    Required</p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-5">
                            <div class="form-group">
                                <label>Place</label>
                                <input type="text" formControlName="place" class="form-control" />
                                <p style="color:red" *ngIf="registerForm.get('place').hasError('required') && registerForm.get('place').touched"> Required</p>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Home type</label>
                        <div class="col-md-4">
                            <label>
                                    <input type="radio" formControlName="onebhk"  value="yes" /> 1 BHK
              </label>
                            <p style="color:red" *ngIf="registerForm.get('onebhk').hasError('required') && registerForm.get('onebhk').touched"> Required</p>
                            <label>
                                    <input type="radio" formControlName="twobhk"  value="no" /> 2 BHK
              </label>
                            <p style="color:red" *ngIf="registerForm.get('twobhk').hasError('required') && registerForm.get('twobhk').touched"> Required</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-5">
                            <div class="form-group">
                                <label>Min</label>
                                <input type="text" formControlName="min" class="form-control" />
                                <p style="color:red" *ngIf="registerForm.get('min').hasError('required') && registerForm.get('min').touched"> Required</p>
                                <p style="color:red" *ngIf="registerForm.get('min').hasError('minlength')"> Minimum length should be 3</p>
                                <p style="color:red" *ngIf="registerForm.get('min').hasError('min')"> Minimum 200</p>


                            </div>
                        </div>
                        <div class="col-md-5">
                            <div class="form-group">
                                <label>Max</label>
                                <input type="text" formControlName="max" class="form-control" />
                                <p style="color:red" *ngIf="registerForm.get('max').hasError('required') && registerForm.get('max').touched">Required</p>

                                <p style="color:red" *ngIf="registerForm.get('max').hasError('minlength') "> Minimum length should be 6</p>

                                <p style="color:red" *ngIf="registerForm.get('max').hasError('max')"> Maximum 200000</p>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="col-md-4 border">
                    <div class="row">
                        <div class="form-group">
                            <button class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </div>
            </div>

        </form>

    </div>
</div>

Collectives™ on Stack Overflow

Form validation using angular 2

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related