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

Question

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

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

这是我的小表格：

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

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

谢谢你，伊拉斯莫

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

Answer 2

您也可以像这样使用 Angular 响应式表单

<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]]
    })
  }

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

AngularJS + JavaScript: Enable Submit button only after email is valid and dropdown has a value selected

javascript

validation

angularjs