CODEWITHSUNDEEP
angulartypescript
ChacaLitos
ChacaLitos

Reputation: 13

FormGroup validation TypeScript

Im learning angular 10, but I have a trouble

I have a html document that validate a formgoup in my component. When from my component set a value of textbox the value is displayed ok, but my submit button says that is invalid (required).

Let me show....

Component

 export class PersonalComponent implements OnInit {

  personalForm = new FormGroup({

      name: new FormControl('', Validators.required),
      email: new FormControl('', [Validators.required,
      Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$")])
    });
 public name: string = '';
 public email: string = '';
 public submitted = false;

Method

  getPersonalData() {
    this.activatedRoute.params.subscribe(prm => {
        this.service.getPersonal(prm['id']).subscribe(data => {
          this.name = data.name;
          this.email = data.email;
        },
          err => {
            console.log(err);
          });
    })
  }

Save method

onSave(form: Personal) {
    this.submitted = true;
    if (this.personalSaveForm.valid) {
      this.service.postPersonal(form).subscribe(data => {
        console.log('saved');
      },
        err => {
          console.log(err);
        });
    }
  }

Html document

<form [formGroup]="personalSaveForm" (ngSubmit)="onSave($event)">

 <div class="col-sm-3">
            <label for="name" class="col-form-label">Name</label>
          </div>
          <div class="col-sm-3">
            <input type="text" id="name" value="{{name}}" [ngClass]="{'form-submitted': submitted}" formControlName="name" class="form-control" required />
          </div>

 <div class="col-sm-3">
            <label for="email" class="col-form-label">Email</label>
          </div>
          <div class="col-sm-3">
            <input type="text" id="email" value="{{email}}" [ngClass]="{'form-submitted': submitted}" formControlName="name" class="form-control" required />
          </div>

      <div class=" col-sm-12 align-items-right">
        <button type="submit" id="btnSave" class="btn btn-primary" style="float: right;">Next</button>
      </div>

So, as seen, from the component sets value (for default) for textbox, but when the button is pushed still validate!!! even has a value!

Thx

Upvotes: 0

Views: 535

Answers (1)

Alejandro Barone
Alejandro Barone

Reputation: 2151

I think you have some flaws here:

<div class="col-sm-3">
   <input type="text" id="email" value="{{email}}" [ngClass]="{'form-submitted': submitted}" formControlName="name" class="form-control" required />
</div>

The formControlName needs to be email as the FormGroup value.

Also, if you are using a Validators.required there is no need to use required in your HTML because the form has a programatic validation that makes it required. Another thing to point out is to avoid the use of values directly in the input because it may collide with the formControl value itself.

To set the value of your form control in your component.ts use this syntax.

this.personalSaveForm.get('name').setValue('New Name')

To match a variable directly into an input, you will probably need to use the template-driven ngModel (which I personally dislike).

Finally remember that '' is falsy in JS, so if you use that value as the default, the form will be invalid as default.

Upvotes: 1

Related Questions