Question

在这里，我有一些文本框，商品ID，商品名称，包装类型，然后输入添加按钮，将这些数据保存到DB。但是在这里，当我单击添加按钮时，这些数据为空，它将被保存到DB空数据si要避免空数据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

在您的按钮中添加

"{:.0f}".format(float(Number))

stackBlitz Link

Answer 2

red

[attr.disabled] =“！（selectedStock.ItemCode）”

Answer 3

将必需的验证器应用于输入框以有条件地启用或禁用按钮之后，请使用newStockRequestForm.invalid / newStockRequestForm.valid。

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

出于理解目的，我想添加更多内容：

#newStockRequestForm = ngForm会将对NgForm类实例的引用带到模板ref var（#newStockRequestForm）中。使用点运算符可以访问其属性。例如：newStockRequestForm.invalid。

Answer 4

您可以在组件中创建一个函数，然后在视图中调用该函数以检查null值，如下所示

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()" />

在Angular2 / 4中为空时如何禁用文本框？

4 个答案: