根据 ngIf 在相同 angular 表单中禁用提交按钮

Question

我正在使用 Angular 6 并且我创建了一个响应式表单。这是这里的表格

<form [formGroup]="myForm" (ngSubmit)="myFormSubmit()">
            <div formGroupName = "showNameGroup">  
                <label>
                    <input type="text" formControlName="showName"  >
                  </label>
            </div> 
             <div *ngIf='results | async ; let items '> 
                <div *ngFor='let item of items'>
                  <div *ngIf='item.name != currentPoint.name'>
                     {{item.name}} already exists. You cannot submit until you change the name
                     <!-- also disable submit somehow -->
                  </div>                               
                </div>                  
             </div>

             <select formControlName="showType">
                <option *ngFor='let item of showTypeData' value="{{item.id}}" >{{item.name}}</option>
             </select>

            <button type="submit">Submit</button>
</form>

当我在表单的文本字段中键入内容时，results 会更新

所以，每次 <div *ngIf='item.name != currentPoint.name'> 部分为真时，我也想禁用提交。我怎样才能做到这一点？

谢谢

Answer 1

<form [formGroup]="myForm" (ngSubmit)="myFormSubmit()">
    <div formGroupName = "showNameGroup">  
        <label>
            <input type="text" formControlName="showName"  >
        </label>
    </div> 
    <div *ngIf='results | async ; let items '> 
        <div *ngFor='let item of items'>
            <div *ngIf="!checkItem(item.name, currentPoint.name)">
                {{item.name}} already exists. You cannot submit until you change the name
                     <!-- also disable submit somehow -->
            </div>                               
        </div>                  
    </div>
    <select formControlName="showType">
        <option *ngFor='let item of showTypeData' value="{{item.id}}" >{{item.name}} </option>
    </select>
    <button type="submit" [disabled]="!check">Submit</button>
</form>

ts:
在您的 ts 中添加以下内容：

check: boolean = true;
checkItem(item.name, currentPoint.name): boolean {
    if(item.name != currentPoint.name) {
        check = false;
        return false;
    }
    else {
        check = true;
        return true;
    }
}

Answer 2

您可以检测 div 元素的存在，并在视图中存在任何元素时禁用该按钮。要检测这些元素，请在它们上设置模板引用变量：

<div #existingItem *ngIf="item.name !== currentPoint.name">

并使用 ViewChildren 和 QueryList 监视元素的存在。如果视图中至少存在一个元素，则可以设置标志。

@ViewChildren("existingItem") existingItems: QueryList<ElementRef>;
public disabledButton = false;

constructor(private changeDetector: ChangeDetectorRef) {}

ngAfterViewInit() {
  // Check if an element is initially present
  this.disabledButton = this.existingItems.length > 0;
  this.changeDetector.detectChanges();

  // Monitor the addition/removal of elements
  this.existingItems.changes.subscribe((existingItems) => {
    this.disabledButton = existingItems.length > 0;
    this.changeDetector.detectChanges();
  });
}

最后，如果设置了标志，按钮将被禁用：

<button type="submit" [disabled]="disabledButton">Submit</button>

有关演示，请参阅 this stackblitz。

根据 ngIf 在相同 angular 表单中禁用提交按钮

Disable submit button according to ngIf in the same angular form

angular

angular-reactive-forms

angular6