Can't validate a required field in Angular form builder form group after adding a value

Question

Here's my stackblitz

When I click on my button (in Stackblitz link) and push a value to the array, I'd like to have the field be valid, but it's remaining invalid. If I hard code in a value, it shows as valid, but not if I push a value from a click event.

QUESTION - Can anyone help me understand why? Do I need to use some sort of formArray type?

Here is my code.

 registerForm: FormGroup; constructor(private formBuilder: FormBuilder) {} ngOnInit() { this.registerForm = this.formBuilder.group({ practicedStyles: [[], [Validators.required]] }); } get practicedStyles() { return this.registerForm.get('practicedStyles'); } add() { this.practicedStyles.value.push(1); }

 <div class="card m-3"> <h5 class="card-header">Angular 8 Reactive Form Validation</h5> <div class="card-body"> <form [formGroup]="registerForm"> <p>Is valid: {{practicedStyles.valid}}</p> <p>Is required: {{practicedStyles.errors?.required}}</p> <button class="btn btn-primary" (click)="add()">Add</button> </form> </div> </div>

Answer 1

Did you try using FormGroup.setValue ?

    add() {
      this.registerForm.get('practicedStyles').value.push(1);
      this.registerForm.setValue({practicedStyles: this.registerForm.get('practicedStyles').value});
    }

I think pushing the value directly to the array wouldn't trigger the change because you're not changing the object's reference. And if you try to reassign the FormGroup control to a new object: this.practicedStyles.value = 1 you'll get the following errro message Cannot assign to 'value' because it is a read-only property .

When manipulating FormGroup controls you should use the FormGroup provided methods to do so:

• FormGroup.setValue
• FormGroup.patchValue

So even though you are not changing the object's reference, you are notifying the framework that the object did change.