Angular 6 how to make all input's Not editable element inside a form

Question

Is there a way to disable and make all fields non editable (input / mat-select / textfield / option/input/mat-checkbox etc) inside a Form

Answer 1

Disabled and not editable are not necessarily the same thing. A disabled input is of course also not editable, but it has a distinct appearance - greyed out and looks 'disabled'. A read-only input looks the same as a normal input, but is not editable. So you have to ask whether you want your controls actually disabled or just read-only.

If you just want read-only, you can simply use the readonly property of and bind it to a variable in your controller. For example:

export class LeaseholderComponent implements OnInit, IFormDirtyWarningComponent {

    @Input() editable: boolean = false; // doesn't have to be an @Input
    ...
}


    
        
    
    ...

Note that the editable property doesn't need to be an @Input, but that could be useful if you are using the form as a reusable component and need to make the editable/read-only decision at the DOM level.

For other components like radio buttons, where no readonly property is available, you should probably rethink the layout. It might make more sense to use a different component to display the radio option in read-only mode, rather than the complete list of options. For example, use a label and value pair:

    
        M.
        MME.
    


    Civility
    {{ leaseholderForm.controls['civility'].value }}