Question

这是我的组件add-customer.component.html

<form [formGroup]="addCusForm">
    <div id="login-container">

        <h2 class="add-title">Customer Details</h2>

        <mat-form-field class="example-full-width">
            <input matInput placeholder="First Name" formControlName="firstname" required>
            <mat-error *ngIf="addCusForm.controls.firstname.hasError('required')">
                Please enter first name
            </mat-error>
            <mat-error *ngIf="addCusForm.controls.firstname.hasError('pattern')">
                Please enter valid first name
            </mat-error>
        </mat-form-field>

        <mat-form-field class="example-full-width">
            <input matInput placeholder="Last Name" formControlName="lastname" required>
            <mat-error *ngIf="addCusForm.controls.lastname.hasError('required')">
                Please enter last name
            </mat-error>
            <mat-error *ngIf="addCusForm.controls.lastname.hasError('pattern')">
                Please enter valid last name
            </mat-error>
        </mat-form-field>

        <mat-form-field class="example-full-width">
            <input matInput placeholder="Email address" formControlName="email" required>
            <mat-error *ngIf="addCusForm.controls.email.hasError('required')">
                Please enter email id
            </mat-error>
            <mat-error *ngIf="addCusForm.controls.email.hasError('email')">
                Please enter valid email id
            </mat-error>
        </mat-form-field>

        <div>
            <button mat-raised-button class="Login-btn">Cancel</button>
            <button mat-raised-button color="primary" (click)="onaddCus()" class="Login-btn">Save</button>
        </div>

    </div>
</form>

我使用了上面代码中所示的两个按钮

 <button mat-raised-button  class="Login-btn" >Cancel</button>
 <button mat-raised-button color="primary" (click)="onaddCus()" class="Login-btn" >Save</button>

我的问题是，如果用户在未填写必填字段的情况下单击 SAVE 按钮，则对 SAVE 按钮使用(click)="onaddCus()"来显示错误消息。但是在这里我没有为 Cancel 按钮使用该功能(click)="onaddCus()"，但是它仍然显示错误消息，并且如果我将 Cancel 按钮放置在了可以正常使用的表单之外很好。但是我只希望表单中有两个按钮。

下面是ts add-customer.component.ts文件

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { Router } from '@angular/router';
import { ValidatorUtil } from '../shared/validator.util';

@Component({
    selector: 'ylb-add-customer',
    templateUrl: './add-customer.component.html',
    styleUrls: ['./add-customer.component.css']
})

export class AddCustomerComponent implements OnInit {

    addCusForm: FormGroup;
    hide = true; //password hiding

    constructor(private fb: FormBuilder,
        private router: Router) { }

    ngOnInit() {
        this.addCusForm = this.fb.group({
            'firstname': [null, [Validators.required, Validators.pattern("[a-zA-Z][a-zA-Z ]+")]],
            'lastname': [null, [Validators.required, Validators.pattern("[a-zA-Z][a-zA-Z ]+")]],
            'email': [null, [Validators.required, Validators.email]],
            'password': [null, [Validators.required, Validators.minLength(6), Validators.maxLength(15)]],
            'confirmPassword': [null, [Validators.required, ValidatorUtil.matchWithValidator('password')]]
        });
    }

    onaddCus() {
        this._markAsDirty(this.addCusForm);
    }

    private _markAsDirty(group: FormGroup) {
        group.markAsDirty();
        for (let i in group.controls) {
            group.controls[i].markAsDirty();
        }
    }
}

代码有什么问题？

Answer 1

默认情况下， button 的类型为提交，由于您是在 <form> 中使用它们，默认行为是提交。对您的模板进行以下更改：

在表单上添加 (ngSubmit)="onaddCus()
在取消按钮上添加 type="button"
在保存按钮上添加 type="submit"

<form [formGroup]="addCusForm" (ngSubmit)="onaddCus()">
  <div id="login-container">

    <!-- YOUR OTHER CODE -->

    <div>
      <button type="button" 
              mat-raised-button class="Login-btn">Cancel</button>
      <button type="submit" 
              mat-raised-button color="primary" class="Login-btn">Save</button>
    </div>
  </div>
</form>

角度6中的2个按钮调用了相同的功能

1 个答案: