在真/假语句上输入 [禁用] - Angular 2答案

【问题标题】：input [disabled] on true/false statement - Angular 2在真/假语句上输入 [禁用] - Angular 2
【发布时间】：2018-02-16 17:07:57
【问题描述】：

我有输入：

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

并在 2 次打开弹出模式：当我单击“新建”按钮时，或者当我在网格中双击公司以编辑该公司的属性时。

我的输入在 CompanyTemplatePopupComponent 中，该组件在启动时导入到此组件中，以防必须引导某些路径来影响输入。

我想要的是以这种方式在 this.modal.open 函数中编写，当我打开 editCompany - 输入被禁用时，当 newCompany 被激活，输入字段也被启用。 isUpdate 已经是布尔值，如果有帮助的话。

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 ) );
                    } );
            }
        } );
}

【问题讨论】：

标签： angular input bootstrap-modal disabled-input

【解决方案1】：

您可以添加一个变量。在CompanyTemplatePopupComponent 中说布尔类型的disableInput。

您可以通过一个函数来设置上述变量，该函数可以在模态打开后调用。

使用此布尔变量来禁用或启用输入

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

确保如果变量设置为 false，[attr.disabled] 应设置为 null，以便在浏览器中呈现 HTML 时将禁用的属性从 HTML 中删除。

【讨论】：