Question

在我的角度项目中，我在底部有一个空白行的表格，供用户填写字段，然后点击提交按钮。如果某些字段未填写，我希望禁用提交按钮。我相信我已经创建了一个应该有效的功能，但它不是，为什么会这样？

这是显示的空白行：

<tr>
  <td class="newRow"><input class='form-control' type="date" [(ngModel)]="newRow.date"  /></td>
  <td class="newRow">
    <select class="form-control"  [(ngModel)]="newRow.fullhalf">
      <option value="full">full</option>
      <option value="AM">AM</option>
      <option value="PM">PM</option>
      <option value="(full)">(full)</option>
      <option value="(half)">(half)</option>
    </select>
  </td>
  <td class="newRow">
    <select class="form-control"  [(ngModel)]="newRow.hours">
      <ng-container *ngFor="let h of hours">
          <option [ngValue]="h">{{h}}</option>
      </ng-container>
    </select>
  </td>
  <td class="newRow">
    <select class="form-control" [(ngModel)]="newRow.scheduled" >
      <option value=""></option>
      <option value="advanced">Advanced</option>
      <option value="scheduled">Scheduled</option>
      <option value="unscheduled">Unscheduled</option>
    </select>
  </td>
  <td class="newRow"><input class='form-control' type="text" [(ngModel)]="newRow.notes"  /></td>
  <td class="newRow">
    <input class="form-check-input" type="checkbox" [(ngModel)]="newRow.inPR" />
  </td>

这是我的按钮：

<button [disabled]="!isSaveValid" class="btn btn-default btn-primary" style="float:right;" (click)="saveNewRow()" (onSave)="onSave($event)"><i class="fa fa-check" aria-hidden="true"></i></button>

以及我尝试使用的功能：

isSaveValid() {
    if (this.newRow.fullhalf == "" || this.newRow.hours == 0 || this.newRow.date == null)
        return false;
    else {
        return true;
    }

Answer 1

isSaveValid是一个函数，它应该是html中的isSaveValid（）

替换它：

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^show/([0-9]+)/?$ show.php?id=$1 [NC,L]

由此：

<button [disabled]="!isSaveValid" class="btn btn-default btn-primary" style="float:right;" (click)="saveNewRow()" (onSave)="onSave($event)"><i class="fa fa-check" aria-hidden="true"></i></button>

Answer 2

看看Reactive Forms，他们有一个非常简单的方法：

this.myForm = this.formBuilder.group({
    myInput: ['', Validators.required]
});

Answer 3

我认为要禁用它，您可能需要true : null个值。

试试这个：

[disabled]="!isSaveValid()  ? true : null"

如果对象具有空字段，则尝试禁用保存按钮

3 个答案: