input [disabled] on true/false statement - Angular 2

2.2k views Asked by At

I have input:

<input class="form-control" type="text" [(ngModel)]="context.company.city.zipCode">

And popup modal that opens on 2 occasions: When I click "New" button, or when I double click company in grid to edit properties of that company.

My input is in CompanyTemplatePopupComponent which is imported on start in this component, in case some path must be directed to affect input.

What I want is to write in this.modal.open function in that way, that when I open for editCompany - input is disabled, and when newCompany is activated, input field is also enabled. isUpdate is already boolean if that somehow can help.

openCompanyPopup( isUpdate, company ) {

    let companyToEdit = isUpdate ? company : this.companyTemplate;

    this.modal.open( CompanyTemplatePopupComponent, overlayConfigFactory( {
        dialogClass: 'modal-dialog style-dialog',
        company: companyToEdit,
        isUpdate: isUpdate,
        countries: this.countries,
    }, BSModalContext ) )
        .then(( d: any ) => d.result )
        .then( result => {

            if ( isUpdate ) {

                this.companyService.editCompany( result )
                    .subscribe( company => {
                        this.companyService.get().subscribe( response => this.handleSuccess( response ) );
                    } );
            }
            else {

                this.companyService.newCompany( result )
                    .subscribe( company => {
                        this.companyService.get().subscribe( response => this.handleSuccess( response ) );
                    } );
            }
        } );
}
1

There are 1 answers

0
Ravi Sankar Rao On BEST ANSWER

You can add an variable. say disableInput of type Boolean in CompanyTemplatePopupComponent.

You can set the above variable through a function which can be called after the modal open.

Use this Boolean variable to disable or enable the input

[attr.disabled]="disableInput?'':null"

Make sure, if the variable is set to false, the [attr.disabled] should be set to null, so that the disabled attributed is removed from the HTML when it is rendered in the browser.