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'>部分为true时，我也想禁用某些提交方式。我怎样才能做到这一点？

谢谢

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禁用相同角度形式的提交按钮

2 个答案: