当我通过这种方式定义表单上的电子邮件字段时：
<div style="padding-top: 1em">
<div class="fieldLabel">
<legend>Email Address</legend>
</div>
<input [(ngModel)]="surveyFormData.email" type="email" style="width: 20em;" name="email" />
</div>
当用户触摸或填写电子邮件字段时，页面下方的按钮会停止获取点击事件。如果我从type="email"标记中删除了<input />按钮，则按钮会继续有效，但是type="email"会在我的按钮中断开。
以下是我的按钮的代码：
<input type="button" value=" + " (click)="onPlusElectedPosition()">
这是我接手的现有Angular应用程序的所有代码。而且我是Angular的新手，所以我毫不怀疑我错过了一些简单的东西。
Amy要求我的按钮代码，所以这里是：
onPlusElectedPosition() {
var newPosition:AlumniRole = new AlumniRole();
if(isNullOrUndefined(this.surveyFormData.electedPositions)) {
this.surveyFormData.electedPositions = new Array(0);
}
this.surveyFormData.electedPositions.push(newPosition);
}
所以我正在处理的形式相当长，这就是我最初没有发布整个事情的原因。继续阅读我的完整源代码：
<div class="wrap">
<h1>
Community Outreach
</h1>
<p>
<span class="carolinaBlue">Purpose:</span> To quantify the UNC School of Law's <span class="carolinaBlue">
Legacy
of Leadership
</span> via Carolina Law alumni's stories of service, volunteerism, and leadership across the state
and nation. Information gathered will be utilized in a variety of Carolina Law communnications/marketing pieces (for instance,
an online presence with interactive maps) designed to illustrate Carolina Law alumni's leadership in the communities
where they live and work.
</p>
<form #ofd="ngForm">
<h2>Personal Information</h2>
<fieldset>
<div style="display: inline-block;">
<div style="display: inline-block; padding-right: 1em;">
<legend>First Name</legend><input [(ngModel)]="surveyFormData.firstName" name="firstName" type="text" style="width: 20em;" />
</div>
<div style="display: inline-block; padding-right: 1em;"><legend>Middle Name</legend><input [(ngModel)]="surveyFormData.middleInitial" name="middleInitial" type="text" style="display: inline-block; width: 20em; " /></div>
<div style="display: inline-block; padding-right: 1em;"><legend>Last Name</legend><input [(ngModel)]="surveyFormData.lastName" name="lastName" type="text" style=" display: inline-block; width: 20em;" /></div>
</div>
<div style="padding-top: 1em" >
<div class="fieldLabel">
<legend>UNC Law Class Year</legend>
</div>
<input type="number" [(ngModel)]="surveyFormData.classYear" name="GraduationYear" min="1960" max="2019" style="width: 6em;" placeholder="YYYY" />
</div>
<div style="padding-top: 1em"><div class="fieldLabel"><legend>Home Address</legend></div><input [(ngModel)]="surveyFormData.streetAddress" name="streetAddress" type="text" style="width:30em;" /> </div>
<div style="display: inline-block; padding-top: 1em">
<div style="display: inline-block; padding-left: 12em; padding-right: 1em;">
<legend>City</legend><input [(ngModel)]="surveyFormData.city" name="City" style="width: 14em;" />
</div>
<div style="display: inline-block; padding-right: 1em;">
<legend>State</legend><input [(ngModel)]="surveyFormData.state" name="State" style="width: 10em;" />
</div>
<div style="display: inline-block; padding-right: 1em;">
<legend>ZIP Code</legend><input [(ngModel)]="surveyFormData.postalCode" name="postalCode" style="width: 7em;" />
</div>
</div>
<!-- leaving this next line as is causes my problems, removing the type="email" "fixes" my problem but removes the validation rules -->
<div style="padding-top: 1em"><div class="fieldLabel"><legend>Email Address</legend></div><input [(ngModel)]="surveyFormData.email" type="email" style="width: 20em;" name="email" /></div>
<div style="padding-top: 1em"><div class="fieldLabel"><legend>Employer Name, Title</legend></div><input [(ngModel)]="surveyFormData.employerName" name="employerName" type="text" style="width: 24em;" /></div>
<div style="padding-top: 1em"><div class="fieldLabel"><legend>Practice Area(s)</legend></div><input [(ngModel)]="surveyFormData.practiceArea" name="practiceArea" type="text" style="width: 24em;" /></div>
<!-- </div> -->
</fieldset>
<h2>Volunteer Leadership Roles</h2>
<p>Please share your commitment to community leadership by noting all organizations you have voluntarily served below.</p>
<div *ngFor="let eachRole of surveyFormData.leadershipRoles; let i=index">
<leadership-role [idx]="i" [role]="eachRole" (deletePosition)="deleteLeadershipRole($event)" #role></leadership-role>
</div>
<input type="button" value=" + " (click)="onPlusLeadershipRole()">
<!-- <h2>Elected Office</h2>
<p>Please share your commitment to public service by noting all elected positions you have held below.</p> -->
<h2>Public Service Roles</h2>
<p>Please share all elected and/or nonelected public service positions you have held, including military service, below.</p>
<div *ngFor="let eachPosition of surveyFormData.electedPositions; let i=index">
<elected-position [idx]="i" [role]="eachPosition" (deletePosition)="deleteElectedPosition($event)" #role></elected-position>
</div>
<input type="button" value=" + " (click)="onPlusElectedPosition()">
<h2>Pro Bono Legal Services</h2>
<p>Please share your commitment to Pro Bono service by noting the hours you commit, and the clients you serve annually.</p>
<fieldset>
<input [(ngModel)]="surveyFormData.proBonoHours" type="radio" name="probono" value="0-25">1-25 hrs<br>
<input [(ngModel)]="surveyFormData.proBonoHours" type="radio" name="probono" value="26-50">26-50 hrs<br>
<input [(ngModel)]="surveyFormData.proBonoHours" type="radio" name="probono" value="51-100">51-100 hrs<br>
<input [(ngModel)]="surveyFormData.proBonoHours" type="radio" name="probono" value="gt100">>100 hrs
<p class="extraSpace">Please provide a description of the type(s) of pro bono service you engaged in</p>
<textarea [(ngModel)]="surveyFormData.proBonoDescription" name="proBonoDescription" rows="8" cols="60"></textarea>
</fieldset>
<h2>Talking to Students About Community Leadership and Public Service</h2>
<fieldset>
<p>
<input [(ngModel)]="surveyFormData.checkedTalkToStudents" type="checkbox" name="mentoring">
Please check this box if you are willing to speak to Carolina Law 3L students about how to get
involved in public service and what it means to be a leader in your community.
</p>
</fieldset>
<!-- removed per Matt Marvin and Adam Stiffler on 9/14/2017
<h2>Other Information and/or Feedback</h2>
<p>Please share any other information and/or provide feedback you wish to share with the Carolina Law Advancement Office</p>
<textarea [(ngModel)]="surveyFormData.feedback" name="feedback" rows="8" cols="60"></textarea>
-->
<div><button class="extraSpace" type="button" value="Send" (click)="onProcessForm()">Send</button></div>
</form>
</div>