AngularJS + JavaScript：仅在电子邮件有效且下拉列表中选择了值后启用提交按钮答案

【问题标题】：AngularJS + JavaScript: Enable Submit button only after email is valid and dropdown has a value selectedAngularJS + JavaScript：仅在电子邮件有效且下拉列表中选择了值后启用提交按钮
【发布时间】：2020-09-01 17:27:29
【问题描述】：

我有一个表单，其中包含一个输入电子邮件字段和一个由数据库中的数组填充的下拉列表，在底部我有一个提交按钮，当表单首次打开时该按钮被禁用。

我想了解如何启用此提交按钮，前提是输入字段包含有效的电子邮件，并且下拉列表具有选定的值。

这是我的小表格：

<form name="form">
    <div class="container pt-5 pb-5">
        <div class="row">
            <div class="col-md-8">
                @* Email Address *@
                <div>
                    <label for="email-address">Email</label>
                    <input type="email" class="form-control" name="emailID" ng-model="email" placeholder="Enter Email Address" />                        
                </div>
                <br />
                @* Meetings  *@
                <div>
                    <label for="meeting-list">Current Available Meetings</label>
                    <select ng-model="selectedMeeting" ng-change="GetValue()">
                        <option ng-repeat="meeting in MeetingList" value="{{meeting.MeetingID}}">Meeting: {{meeting.MeetingName}}</option>
                        <option value="">--Select Meeting--</option>
                    </select>
                </div>

                <div>
                    <input type="submit" value="Submit" id="butClick" ng-click="SendMail();"/>
                </div>


            </div>
        </div>
    </div>
</form>

如果有人有一些代码可以做与我需要的类似的事情，并且不介意分享它，那就太好了。

谢谢你，伊拉斯莫

【问题讨论】：

标签： javascript angularjs validation

【解决方案1】：

您可以在输入中使用'required'，您可以在提交按钮中设置[禁用]和设置条件。

    <form #formName="ngForm" (ngSubmit)="yourFunction(formName)">

    <input type="email" class="form-control" name="emailID" ng-model="email" placeholder="Enter Email Address" required />

    <button type="submit" class="btn btn-primary btn-round" [disabled]="!formName.form.valid || form.pristine">Send mail</button>

    </form>

【讨论】：

【解决方案2】：

你也可以像这样使用 Angular Reactive Forms

<form [formGroup]="form">
      <input placeholder="Enter your email" formControlName="email" required/>
      <button type="submit" [disabled]="form.invalid">SEND</button>
</form>

在 app.component.ts 文件中，你必须写

form: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
    this.form = this.fb.group({
      email: ['', [Validators.required, Validators.email]]
    })
  }

【讨论】：