Angular 8: Material input is not disabled after a FormGroup update

110 views Asked by At

I have a FormGroup in a component, initialized with data from a parent component. Here is the initialization in my child component :

<mat-form-field class="fluid">
   <mat-label>Prénom</mat-label>
   <input matInput formControlName="firstname" type="text" placeholder="Prénom" required />
</mat-form-field>
ngOnChanges(changes: SimpleChanges) {
   this.form = this.fb.group({
      firstname: [this.currentParticipant.username, Validators.required])
   })

   // ...
   this.form.controls.firstname.disable()
}

I want my input to be disabled. On a click on a parent component button, data are updated and sent to my child component. On the updated form, the firstname input is not disabled any more (the value of this input is well updated).

Tested solutions that didn't work:

  • [attr.disabled]="true" and [disabled]="true" attribute in template
  • Set disabled attribute on formGroup initialization :
this.form = this.fb.group({
      firstname: [{ value: this.currentParticipant.username, disabled: true }, Validators.required])
   })

Do you have an idea of what's going on please ?

0

There are 0 answers