Как отключить текстовое поле, когда пусто в Angular2 / 4?

Question

Здесь у меня есть текстовое поле, Идентификатор товара, наименование товара, тип упаковки и нажмите кнопку добавления, эти данные сохраняются в DB. Но здесь эти данныепустые, когда я нажимаю кнопку добавления, это будет Сохранить в БД с нулевыми данными. Я хочу избежать пустых данных s и отключить кнопку, если в текстовых полях нет данных.

Это мой HTML-файл

    <form #newStockRequestForm="ngForm" (ngSubmit)="OnSubmit(newStockRequestForm.value);">          
         <section class="CommonWhiteBg">
        <div class="row">
            <article class="col-md-4 col-sm-12 col-xs-12">
 <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="form-group">
                            <label>Item Code</label>
                            <div *ngIf="selectedStock">                           
                                <input [(ngModel)]="selectedStock.ItemCode" id="ItemCode" placeholder="name" class="form-control" disabled name="ItemCode" #ItemCode="ngModel" ngModel>
                             </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="form-group">
                            <label>Item Description</label>
                            <div *ngIf="selectedStock">                        
                                <input [(ngModel)]="selectedStock.ItemDescription" id="ItemDescription" placeholder="name" class="form-control" disabled name="ItemDescription" #ItemDescription="ngModel" ngModel>                           
                             </div>
                        </div>
                    </div>
                </div>
.......................etc.......................
    <div class="col-md-12 text-right" style="margin-bottom:20px;">

                        <input type="button" class="btn btn-success DefaultBtnStyle" value="Add Item" (click)="addItems(newStockRequestForm.value);newStockRequestForm.reset()" />
</div>
.............

Answer 1

Вы можете создать функцию в своем компоненте и вызывать эту функцию в представлении, чтобы проверить нулевое значение, как показано ниже

isThereNullValue(){
// here you check the null values ​​for required fields
// return a boolean => true if there was a property with a null value
}

<input type="button" [disabled]="isThereNullValue()" class="btn btn-success DefaultBtnStyle" value="Add Item" (click)="addItems(newStockRequestForm.value);newStockRequestForm.reset()" />

Answer 2

Используйте newStockRequestForm.invalid / newStockRequestForm.valid после применения необходимых валидаторов к полям ввода для условного включения или отключения кнопки.

https://angular.io/api/forms/NgForm#template-variable-references

Я хотел бы добавить еще немного для понимания цели:

# newStockRequestForm = ngForm доставит ссылку на экземпляр класса NgForm в шаблон ref var (#newStockRequestForm).Используя оператор точки, вы можете получить доступ к его свойствам.например: newStockRequestForm.invalid.

Answer 3

Добавьте в свою кнопку

<input type="button" [disabled]="selectedStock.ItemCode === null || selectedStock.ItemCode === null" class="btn btn-success DefaultBtnStyle" value="Add Item" (click)="addItems(newStockRequestForm.value);newStockRequestForm.reset()" />

stackBlitz Link

Answer 4

<input 
     [(ngModel)]="selectedStock.ItemCode"
     id="ItemCode"
     placeholder="name"
     class="form-control"
     [attr.disabled]="!(selectedStock.ItemCode)"
     name="ItemCode"
     #ItemCode="ngModel"
     ngModel>

[attr.disabled] = "! (SelectedStock.ItemCode)"