Question

我有四个输入 html 字段和一个按钮。我想要做的是，仅当每个输入字段中有四个输入时才使按钮处于活动状态并启用。如果至少有一个输入字段为空，则该按钮必须为已禁用

我想我需要绑定输入字段中的一些属性请让我知道如何实现这一点

代码：

<div class="modal-body">
            <form #form="ngForm" class="clr-form  clr-form-horizontal" autocomplete="off">
                <clr-input-container>
                    <label >{{ "DISTANCE_MEASUREMENT.START_LONGITUDE" | translate }}:</label>
                    <input
                        id="startLngTextId"
                        required
                        maxlength="25"
                        clrInput
                        type="text"
                        name="name"
                        [(ngModel)]=iMeasureDistanceParametersPasser.startLongitude
                    />
                </clr-input-container>
                <clr-input-container>
                    <label>{{ "DISTANCE_MEASUREMENT.START_LATITUDE" | translate }}:</label>
                        <input
                            id="startLatTextId"
                            required
                            maxlength="25" 
                            clrInput
                            type="text"
                            name="name"
                            [(ngModel)]=iMeasureDistanceParametersPasser.startLatitude

                        />
                </clr-input-container>
                <clr-input-container>
                    <label>{{ "DISTANCE_MEASUREMENT.END_LONGITUDE" | translate }}:</label>
                    <input
                        id="endLngTextId"
                        required
                        maxlength="25"
                        clrInput
                        type="text"
                        name="name"
                        [(ngModel)]=iMeasureDistanceParametersPasser.endLongitude

                    />
                </clr-input-container>
                <clr-input-container>
                    <label>{{ "DISTANCE_MEASUREMENT.END_LATITUDE" | translate }}:</label>
                        <input
                            id="endLatTextId"
                            required
                            maxlength="25" 
                            clrInput
                            type="text"
                            name="name"
                            [(ngModel)]=iMeasureDistanceParametersPasser.endLatitude
                        />
                </clr-input-container>
                <div>
                    <button
                        [disabled]="form.invalid"
                        class="btn btn-primary"
                        type="button"
                        (click)="measureDistanceForCoordinates()"                       
                    >
                    {{ "DISTANCE_MEASUREMENT.ENTRY_LABEL" | translate }}
                    </button>
                </div>
                <div>
                    <button
                        class="btn btn-primary"
                        type="button"
                        (click)="clearInputs()"                     
                    >
                    {{ "COMMON.CLEAR_DATA" | translate }}
                    </button>
                </div>
                <div>
                    <label *ngIf=showMeasuredDistance>
                        {{ "DISTANCE_MEASUREMENT.DISTANCE" | translate }} 
                        {{ "DISTANCE_MEASUREMENT.EQUAL" | translate }} 
                        {{ mMeasuredDistanceInKM }} 
                        {{ "DISTANCE_MEASUREMENT.UNIT_KM"  | translate }}
                    </label>
                </div>
                    
            </form>
            <div class="modal-footer">
                <button
                    class="btn btn-outline"
                    type="button"
                    (click)="hideWindowOverlay()"
                >
                {{ "COMMON.CANCEL" | translate }}
                </button> 
            </div>
        </div>

Answer 1

有关于 angular page

的教程

tldr;

<input  name="property" required minlength="4" 
      [(ngModel)]="property" #ngModelVar="ngModel">

<button [disabled]="ngModelVar.invalid && (ngModelVar.dirty || ngModelVar.touched)">test</button>

然而，这不是做事的最佳方式。请务必阅读FormControl。

我们在大型应用程序（具有多个验证条件的大型表单等）中做事的方式是创建一个匹配 [name][ngModel] 的指令。然后我们创建在构造函数中注入 NgForm 的服务。最后，当我们想在页面上验证我们的表单时，我们会询问 MyFormService if this.myFormService.ngForm.valid。

有很多事情要做，但事实证明这是一个很棒的概念。只需很少的工作，您就可以创建反应式模板驱动的表单。

注意：此外，您应该始终让用户单击按钮，然后如果出现问题，请向他显示您不允许他执行操作的原因。

编辑：

如果表单无效，您可以禁用按钮（但按钮必须在表单元素内）

<button [disabled]="form.invalid">test</button>

如何根据输入字段的输入启用或禁用按钮

1 个答案: