我正在做一個 Angular 12 材質應用程式。
我有一個像這樣的簡單表格
<form [formGroup]="form" class="normal-form" (ngSubmit)="onSubmit()">
<mat-grid-list cols="2" rowHeight="300px">
<mat-grid-tile>
<div class="controles-container">
<input type="hidden" formControlName="Id">
<mat-label><strong>Active</strong></mat-label>
<mat-slide-toggle formControlName="IsActive"
[checked]="checked">
</mat-slide-toggle>
<textarea matInput hidden></textarea>
<mat-form-field>
<input formControlName="Name" matInput placeholder=" Notification Name" >
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<mat-select formControlName="ProcessorName" placeholder="Processor Name">
<ng-container *ngFor="let processors of dataSourceProcessors">
<mat-option value="{{processors.Value}}">{{processors.Text}}</mat-option>
</ng-container>
</mat-select>
</mat-form-field>
</div>
</mat-grid-tile>
<mat-grid-tile>
<div class="controles-container">
<mat-label><strong>Channel</strong></mat-label>
<li *ngFor="let chanel of dataSourceChannelLevel">
<mat-checkbox id={{chanel.NotificationLogLevel.Id}} formControlName="Channel" (change)="onChangeEventFunc( $event)">
{{chanel.NotificationLogLevel.Name}}
</mat-checkbox>
</li>
<div class="button-row">
<button mat-raised-button color="warn" (click)="onClose()">Close</button>
<button mat-raised-button color="primary" type="submit" [disabled]="form.invalid">Create</button>
</div>
</div>
</mat-grid-tile>
</mat-grid-list>
</form>
在組件中我有這個
form:FormGroup=new FormGroup({
Id: new FormControl(null),
Name: new FormControl('',Validators.required),
IsActive: new FormControl(true),
ProcessorName: new FormControl(0),
Channel: new FormControl(''),
});
我有兩個按鈕，創建呼叫 Form.Submit 和關閉按鈕...我遇到的問題是，當我呼叫關閉按鈕時，它呼叫 onClose() 函式和 Submit() 函式。
我錯過了什么？
謝謝
uj5u.com熱心網友回復：
如果按鈕是提交按鈕如果它在表單內部/與表單關聯并且沒有 type="button"。添加type="button"屬性以避免在表單元素上觸發 onsubmit 功能。
<button mat-raised-button color="warn" (click)="onClose()" type="button">Close</button>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/449561.html