Question

我的父组件有一个下一步按钮，该按钮应该被禁用，直到用户在子控件拥有的任何一个控件中输入一个值。子控件具有下拉列表、文本框和日期日历控件。我正在考虑为这些控件中的每一个使用一个输出发射器，如果任何值发生变化，该按钮将被启用。但是，我认为这不会那么简单，我想知道是否有更简单的方法。

这里是不太简化的代码父组件的 html：

        <ng-container [ngSwitch]="activeLayout">
            <ng-container *ngSwitchCase="repair">
                <app-repair [functionTypeCode]="functionTypeCode"></app-repair>
            </ng-container>
            <ng-container *ngSwitchCase="confirm">
                <app-confirm [actionSelected]="actionSelected" [functionTypeCode]="functionTypeCode">
                </app-confirm>
            </ng-container>
        </ng-container>
        <ng-container [ngSwitch]="activeLayout">
            <ng-container *ngSwitchCase="repair">
                <button class="btn btn-sm btn-outline-secondary" style="height: 34px" type="button">Next</button>
            </ng-container>
        </ng-container>

子组件的 html：

    <div class="row" *ngIf="showIfUnit()">
        <div class="col">
            <app-dropdown placeholderLabel="Find Country Code..." label="For Country Code"
                [(selected)]="selectedCountryValue" [dropdownData]="countryList">
            </app-dropdown>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <input matInput [(ngModel)]="selectedExec" name="exec" />
        </div>
    </div>
    <div class="row">
        <div class="col">
            <mat-form-field>
                <mat-label>Order Date</mat-label>
                <input matInput [matDatepicker]="pickerOrderDate" [(ngModel)]="selectedOrderDate">
                <mat-datepicker-toggle matSuffix [for]="pickerOrderDate"></mat-datepicker-toggle>
                <mat-datepicker #pickerOrderDate appendTo="body"></mat-datepicker>
            </mat-form-field>
        </div>
    </div>

因此，如果未在下拉列表中选择值或未在文本框中输入任何内容或未从日历控件中选择日期，则应禁用父级上的按钮。一旦在子组件上选择了其中任何一个，就应该启用该按钮。

编辑：添加了 ng-containers

谢谢！

Answer 1

我想我有一个解决方案。您可以通过使用 @Output() informParent = new EventEmitter(); 来实现这一点。这是我的代码和下面的 stackblitz 链接=>
子 HTML：

<label>Combo From Child:</label>
  <select 
    [(ngModel)]="temp" (ngModelChange)="ngChange($event)">
    <option *ngFor="let item of countries" 
    [value]="item.id">{{item.name}}
    </option>
</select>

父 HTML：

<button [disabled]="isbuttonDisable">Parent From Button</button>
<br>
<child message="Message from parent to child" (informParent)="parentWillTakeAction($event)"></child>

子 TS：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})

export class ChildComponent implements OnInit {
temp:any;
  @Input() message: string;
  @Output() informParent = new EventEmitter();

  countries = [{
    id: 1, name: 'France', cities: ['Paris', 'Marseille', 'Nice']
  },
  {
    id: 2, name: 'Germany', cities: ['Hamburg', 'Berlin', 'Munich']
  },
  {
    id: 3, name: 'Italy', cities: ['Roma', 'Milan', 'Napoli']
  },
  ];
 
ngChange($event){
   console.log($event);
   console.log(this.temp);
   this.informParent.emit(this.countries.find(c=>c.id==this.temp));
}
}

家长 TS：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  messageFromChild: string = '';
  isbuttonDisable:boolean=true;
  parentWillTakeAction(message){
    this.messageFromChild = message.name+' was Selected.';
    this.isbuttonDisable=false;
  }
}

注意：请检查 Stackblitz Link Demo。

Answer 2

有一个更简单的方法。如果您的孩子“输入”在表格下，例如就像

<form #myform="ngForm">
  <label>Combo From Child:</label>
  <select name="country" [(ngModel)]="temp">
    <option *ngFor="let item of countries" 
    [value]="item.id">{{item.name}}
    </option>
</select>
  <input [(ngModel)]="value" name="value">
</form>

如果您使用 [(ngModel)]，请注意您需要将“名称属性”添加到您的输入中

您可以在子表单中将表单声明为 ViewChild

  @ViewChild(NgForm,{static:false}) form:NgForm

好吧，当您更改输入中的某些内容时，form.dirty 为真，因此您可以从父级访问此值（为此使用模板引用变量（#child）

<button [disabled]="!child.form?.dirty">Parent From Button</button>
<child #child ></child>

见stackblitz

如果尚未选择子组件上的控件，则禁用父组件上的按钮

2 个答案: