How to make a Disabled Input also Required with Angular Reactive Form?

Question

I have an input which will be populated when the user clicks on a dialog. So for this I had to make it disabled, because I don't want the user to manually input the value. The only problem is that this input must be required, and I couldn't make it so far.

I have tried to add 'required' directive in the input and also tried adding Validator.required on the form creation, but none of these made the field required for the form.

createUnityForm(): FormGroup {
    return this._formBuilder.group({
        id      : [this.unity.id],
        description: [this.unity.description],
        floor: [{value: this.unity.floor, disabled: true}, Validators.required]
    });
}

<mat-form-field appearance="outline" floatLabel="always" class="mr-16" fxFlex>
    <mat-label>{{'UNITY.FLOOR' | translate}}</mat-label>
    <input matInput placeholder="{{'UNITY.SELECT-FLOOR' | translate}}"
        name="floor"
        formControlName="floor"
        required>
</mat-form-field>

<button *ngIf="action === 'edit'"
    mat-button
    class="save-button"
    (click)="matDialogRef.close(['save',unityForm])"
    [disabled]="unityForm.invalid"
    aria-label="save">
        {{'GENERAL.SAVE' | translate}}
</button>

unityForm is valid even when there's nothing in the input

Answer 1

Try readonly instead of disabled.

Answer 2

When it sets the disabled attribute, the validators will be ignored.

Disabled controls are exempt from validation checks and are not included in the aggregate value of their ancestor controls.

See: https://angular.io/api/forms/AbstractControl#disabled

If you want to make it disabled with the required or consider the validation, you have to make it readonly.

this._formBuilder.group({
    ...
    name: ['Your value here', Validators.required]
});

<input formControlName="name" readonly/>

Answer 3

If you set a FormControl to disabled its validators will be ignored.

More info: https://angular.io/api/forms/AbstractControl#disabled

Answer 4

Radoslaw has it. Try readonly in the HTML instead of disabled in the model. This provides a similar UI to a disabling a control in the model but the validation remains operative. This can be useful (for example pulling in records from elsewhere to commit to another db, not allowing any user changes, but only committing if original data are valid)

Answer 5

You can't, reactive forms don't use validators on disabled fields. I think it's a good way to do like this:

-HTML

<input
type="text"
formControlName="controlName"
[ngClass]="{ 'is-invalid': 
(c.controlName.errors || c.controlName.disabled) 
&& submited }"/>

-TypeScript

submited = false;

form: FormGroup = this.formBuilder.group({
    controlName: [{ value: '', disabled: true }, Validators.required]
});

get c(): { [key: string]: AbstractControl } {
    return this.form.controls;
}

save(): void {
    this.submited = true;    
    if (this.form.invalid
       || this.formControl.controlname.value === '') {
     return;
}

-CSS

.is-invalid {
  border: 1px solid #dc3545;
}

When you click on button for SAVE, required field will get red border if there is no value