Question

使用put / update方法时，该按钮将被禁用，直到触摸了每个字段并且每个字段中的值至少已更改。而post方法可以很好地工作。

Employee.component.html

 <form
    fxLayout="column"
    [formGroup]="editForm"
    #f="ngForm" (ngSubmit)="onSubmit()"
  >
  <div class="input-row">
      <mat-form-field fxFlex>
        <mat-label>Id</mat-label>
        <input readonly 
        value="{{data.emp.id}}"
          matInput #id disabled
          formControlName="id"
          required
        />
      </mat-form-field>
    </div>
    <div class="input-row">
      <mat-form-field fxFlex>
        <mat-label>Name</mat-label>
        <input 
        value="{{data.emp.name}}"
          matInput 
          placeholder="name"
          formControlName="name"
          required
        />
      </mat-form-field>
    </div>

    <div class="input-row">
      <mat-form-field fxFlex>
        <mat-label>Designation</mat-label>
        <input
        value="{{data.emp.designation}}"
          matInput
          placeholder="designation"
          formControlName="designation"
          required
        />
      </mat-form-field>
    </div>

    <br />
    <div class="">
      <button
        mat-raised-button
        type="reset"
        class="btn btn-danger width"
        (click)="close()">
        Close</button
      >&nbsp;&nbsp;
      <button
        mat-raised-button
        [disabled]="!f.valid"
        right
        class="btn btn-success width right"
        type="submit">
        Update
      </button>
    </div>
  </form>

Employee.component.ts

 editForm: FormGroup;

constructor(
    public dialogRef: MatDialogRef<EmployeeComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any,
    private service: EmployeeService
  ) {}

  ngOnInit() {
    this.editForm = new FormGroup({
      id: new FormControl({ disabled: true }, Validators.required),
      name: new FormControl("", [
        Validators.required,
        Validators.pattern(
          /^[A-Za-z]{1,16}([ ]?[a-zA-Z]{0,16})([ ]?[a-zA-Z]{0,16})$/
        )
      ]),
      designation: new FormControl("", [
        Validators.required,
        Validators.pattern(
          /^[A-Za-z]{1,16}([ ]?[a-zA-Z]{0,16})([ ]?[a-zA-Z]{0,16})$/
        )
      ])
    });
  }

 onSubmit() {
    console.log(this.editForm.value);
    this.service.updateEmployee(this.editForm.value).subscribe(
      data => {
        this.dialogRef.close();
      },
      err => {
        console.log(err);
      }
    );
  }
  close() {
    this.dialogRef.close();
  }

即使使用模板驱动的表单，我也面临着同样的问题。

Answer 1

在app.module.ts中从“ @ rxweb / reactive-form-validators”导入{RxReactiveFormsModule}

进口：[ ....， RxReactiveFormsModule ]

在app.component.ts

中

    import { Component, OnInit } from '@angular/core';
    import {FormGroup,FormControl,Validators } from "@angular/forms"
    import  {RxFormBuilder,FormGroupExtension } from "@rxweb/reactive-form-validators"

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  name = 'Angular';
  editForm:FormGroup;

  constructor(private formBuilder:RxFormBuilder){}

  ngOnInit(){

this.editForm = this.formBuilder.group({
      id:[1, Validators.required],
      name: ["Anil", [
        Validators.required,
        Validators.pattern(
          /^[A-Za-z]{1,16}([ ]?[a-zA-Z]{0,16})([ ]?[a-zA-Z]{0,16})$/
        )
      ]],
      designation: ["Software Engg", [
        Validators.required,
        Validators.pattern(
          /^[A-Za-z]{1,16}([ ]?[a-zA-Z]{0,16})([ ]?[a-zA-Z]{0,16})$/
        )
      ]]
    });

  }

  onSubmit() {
    console.log(this.editForm.value)
   let isDirty = (<FormGroupExtension>this.editForm).isDirty()

  }
}

在app.component.html

中

<div class="container">
  <main class="col-12">
<h3 class="bd-title" id="content">Dirty Check Example</h3>
<br/>
<form [formGroup]="editForm" (ngSubmit)="onSubmit()" >
<div class="form-group">
    <label>Id</label>
    <input type="text" formControlName="id" class="form-control"  />
</div>
<div class="form-group">
    <label>Name</label>
    <input type="text" formControlName="name" class="form-control"  />
</div>
<div class="form-group">
    <label>Designation</label>
    <input type="text" formControlName="designation" class="form-control"  />
</div>
<button [disabled]="!(editForm.valid ||!editForm['isDirty']())" class="btn btn-primary">Update</button>
</form> 
</main></div>

我在这里用stackblitz创建了一个例子

Angular Update/Edit form- StackBlitz

直到在表单字段“ Angular-ReactiveForms”中更改了至少一个值后，使用“验证”更新表单才起作用

1 个答案: