如何在没有任何提交按钮的情况下提交模板驱动的角形? [英] How to submit a template driven angular form without any submit button?

问题描述

我是Angular10的新手，并被告知要执行任务.任务描述:-我必须创建一个表单，当所有字段都填满时，该表单会自动提交.但是我无法做到这一点，我在不单击任何按钮的情况下如何使用 Resiter(regForm)函数遇到了困难.

I am very new to Angular10 and have been told to do a task. Task Description:- I have to create a form that gets auto-submitted when all the fields are filled. But I am unable to do it, I am having difficulty on how I shall use the Resiter(regForm) function without any button clicks.

app.component.html文件

{{title}}

<div class="container text-center">
   <div class="row">
     <div class="form-bg">

      <form #regForm="ngForm" (ngSubmit)="Register(regForm)">
         <h2 class="text-center">Registration Form</h2>
         <br>

         <div class="form-group">
             <input type="text" class="form-control" placeholder="first Name" name="firstName" required ngModel>
         </div>
         <div class="form-group">
           <input type="text" class="form-control" placeholder="last Name" name="lastName" required ngModel>
         </div>
         <div class="form-group">
           <input type="email" class="form-control" placeholder="email" name="email"  required ngModel>
         </div>

         <br>
         <div class="align-center">
           <button type="submit" class="btn btn-primary" id="register">Register</button>
         </div>
         <ng-template *ngIf="regForm.valid ; then thenBlock">

         </ng-template>
         <ng-template #thenBlock>
           form is now valid

           <div (mousemove)="Register(regForm)"></div>
           <!-- {{Register(regForm)}} -->
           
         </ng-template>
      </form>
      
     </div>
   </div>
</div>

app.component.ts文件是

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'TemplateDriven';


  Register(form : any){
    console.log(' button clicked ')
    console.log(form.controls.firstName.value);
    console.log(form.controls.lastName.value);
  }
}

我应该如何使用 Register 函数?还有一点，当我使用* ngIf时，函数 Register 被调用了很多次.

How should I use the Register function? One more point, when I am using *ngIf, the function Register is getting called many number of times.

推荐答案

在考虑自动提交时，您需要考虑的几件事

When considering automatic submissions, you need to consider few things

• 确保仅在必填字段中填写时提交
• 请确保您在表单字段中发生更改时不会连续提交表单，并且仅在发生任何更改时才重新提交

component.html

component.html

<form [formGroup]="form">
    <h2 class="text-center">Registration Form</h2>
    <br>
    <div class="form-group">
        <input type="text" class="form-control" placeholder="first Name" formControlName="firstName">
    </div>
    <div class="form-group">
        <input type="text" class="form-control" placeholder="last Name" formControlName="lastName">
    </div>
    <div class="form-group">
        <input type="email" class="form-control" placeholder="email" formControlName="email">
        <span *ngIf="form.controls['email']?.errors?.required">This field is required</span>
    </div>

    <br>
    <div *ngIf="form.valid">
        Valid form
    </div>
</form>

component.ts

component.ts

ngOnInit() {
    this.form = this.fb.group({
        firstName: ['', Validators.required],
        lastName: [''],
        email: ['', Validators.required],
    });

    this.form.valueChanges.pipe(
        debounceTime(3000),
        distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b))
    ).subscribe(() => {
        if (this.form.valid) {
            console.log('Submit here');
        }
    });
}

• 在这里，我添加了3秒的 debounceTime ，因此，当用户在填写表单时稍作停顿时，会延迟提交有用的表单
• distinctUntilChanged 将确保您不会在表单没有任何更改的情况下重新提交表单.JSON.stringify比较可确保表单是否实际进行了任何更改(为什么将distinctUntilChanged应用于可观察到的valueChanges可能永远无法工作)
• Here I have added a debounceTime of 3 seconds therefore there is a delay of submitting the form useful when user taking pauses when filling the form
• distinctUntilChanged will make sure you won't resubmit the form if there is no change in the form. the JSON.stringify comparision makes sure whether the form actually has any changes (Why distinctUntilChanged when applied to the valueChanges observable is probably never going to work)

这篇关于如何在没有任何提交按钮的情况下提交模板驱动的角形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！