Отключить кнопку отправки в соответствии с ngIf в той же угловой форме

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

Вы можете обнаружить наличие элементов 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>

См. этот стек для демонстрации.

Answer 2

<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>

ц
добавьте следующее в ваш тс:

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