CODEWITHSUNDEEP
angularangular-reactive-forms
Grim
Grim

Reputation: 2097

Angular 4 Reactive Form Validator Required shows error on touch when value is preset

The issue I am having is that the form is showing an error for an input field. I don't know why it is showing and its probably due to a lack of understanding. So I have a component called edit team. Inside this edit team component I have an input field with a value that is set to the current team name. If I put focus on the input text field and then remove focus to lets say the background then the form triggers a "required" error even with the value preset and unchanged.

<div class="form-group">
    <label class="control-label" for="name">Name</label>
    <input tabindex="0" type="text" placeholder="Please enter the team name" title="Please enter the team name" required value=""
               id="name" class="form-control" name="name" formControlName="name" [value]="nameValue">

    // This is the condition for when the error is shown. 
    // So when the input field is touched, check if an error 
    // exists for the validator required. 
    <div class='form-text error' *ngIf="editTeamFormGroup.controls.name.touched">
        <div *ngIf="editTeamFormGroup.controls.name.hasError('required')" class="help-block error small">Team name is required.</div>
    </div>
</div>

This is the constructor and the ngOnIt method for the component. The subscription is for an observable within the team service, when the team changes so do the values.

constructor(private fb: FormBuilder,
              private teamService: TeamService,
              private router: Router,
              public modalService: ModalService) { }

  ngOnInit() {
    this.teamService.teamChange.subscribe(result => {
      this.team = result;
      this.nameValue = this.team.name;
      this.descriptionValue = this.team.description;
    });


    this.editTeamFormGroup = this.fb.group({
      'name': [ this.nameValue, Validators.required ],
      'description': [ this.descriptionValue, Validators.required ]
    });
  }

Note: No errors within the console. The validation works as expected if I add characters to the preset value and change focus to another element.

Upvotes: 2

Views: 2504

Answers (1)

Harry Ninh
Harry Ninh

Reputation: 16758

It's because the way you setup the form. As this.teamService.teamChange is asynchronous, you cannot guarantee this.nameValue is setup before this.editTeamFormGroup is created.

If you wait until you get necessary information then initiate the form group, thing will be working properly. And don't use [value] together with formControlName in <input> unless you have a good reason to.

Template

<form [formGroup]="editTeamFormGroup" *ngIf="editTeamFormGroup">
... 
<div class="form-group">
    <label class="control-label" for="name">Name</label>
    <input tabindex="0" type="text" placeholder="Please enter the team name" title="Please enter the team name" required value=""
               id="name" class="form-control" name="name" formControlName="name">

</form>

Code behind

ngOnInit() {
    this.teamService.teamChange.subscribe(result => {
      this.team = result;
      this.nameValue = this.team.name;
      this.descriptionValue = this.team.description;

      this.editTeamFormGroup = this.fb.group({
        'name': [ this.nameValue, Validators.required ],
        'description': [ this.descriptionValue, Validators.required ]
      });
    });
}

Upvotes: 5

Related Questions