Question

<form [formGroup]="exampleForm" (ngSubmit)="onSubmit(exampleForm)">
...
</form>

在这里，我使用的是 Angular 6 反应性表单。

所以我的外部按钮是

<button mat-icon-button type="submit">
      <img src="../../../../../../assets/images/icon/save-1.svg"/>
</button>

所以我想验证表单并提交。如果存在验证错误，则应禁用保存按钮。

这是onSubmit（）实现。

onSubmit(form : FormGroup){
this.shareObjectRequest = this.shareObjectForm.value;
if (form.value.id != null) {
  this.reportShareObjectService.put(this.reportId, this.shareObjectRequest).subscribe(
    result => {
    },
    err => {
      console.log("Error Occured." + JSON.stringify(err));
    });
}
else {
  this.reportShareObjectService.create(this.reportId, this.shareObjectRequest).subscribe(
    result => {
    },
    err => {
      console.log("Error Occured" + JSON.stringify(err));
    });
  }
}

Answer 1

这是我的答案。但是这里的按钮没有阴影。为此，我需要在按钮中使用ngStyle。

<button form="ngForm" mat-icon-button type="submit" [disabled]="myform.invalid">
      <img  src="../../../../../../assets/images/icon/save-1.svg"/>
</button>

<form [formGroup]="myform" (ngSubmit)="onSubmit(shareObjectForm)" id="ngForm">
</form>

onSubmit(form : FormGroup){
   this.shareObjectRequest = this.shareObjectForm.value;
   if (form.value.id != null) {
      this.reportShareObjectService.put(this.reportId, this.shareObjectRequest).subscribe(
         result => {
      },
         err => {
           console.log("Error Occured." + JSON.stringify(err));
         });
    }
    else {
       this.reportShareObjectService.create(this.reportId, this.shareObjectRequest).subscribe(
         result => {
         },
         err => {
            console.log("Error Occured" + JSON.stringify(err));
       });
   }
}

Answer 2

这可以HTML5格式实现。

<form id="myform" [formGroup]="registerForm" (ngSubmit)="onSubmit()">
.......
</form>

<div class="form-group">
   <button type="submit" class="btn btn-primary"  form="myform">Register</button>
</div>

创建了一个堆叠https://stackblitz.com/edit/angular-pwu69r

Answer 3

创建带有或不带有form标签的表单。

从您的ts进行验证。

submitForm() {
   for (let v in this.exampleForm.controls) {
         this.exampleForm.controls[v].markAsTouched();
   }
   if (this.exampleForm.valid) {

   }
}

并在HTML内使用(click)。

<button type="submit" class="btn btn-primary"
 (click)="submitForm()">Submit</button>
</div>

选中此Stackblitz

Answer 4

假设我们有（简化代码）

class MyComponent {
   myForm = new FormGroup();
   doSave() {
      const form = this.myForm;
      // form.value.id
   }
}

<form [formGroup]="myForm" (ngSubmit)="doSave()">
...
</form>
<ng-container *ngIf="myForm.valid">
  your button if valid
  <button (click)="doSave()">Save</button>
</ng-container>
<ng-container *ngIf="!myForm.valid">
  your button if NOT valid
</ng-container>

现在...

您可以在视图中的每个位置调用doSave（）。
myForm.valid将为您提供信息。如果[disabled] =“ myForm.valid”对您不起作用，您可以使用两个单独的部分作为示例。

Answer 5

如果您已经在组件中完成了FormGroup，而这就是您要绑定到模板中的内容，则只需在禁用的attr中再次引用FormGroup。

即使在我的示例中，按钮位于无关紧要的表单内部，因为您使用的是在组件中声明的变量作为引用，因此您可以在html中的任何位置使用它

<form autocomplete="off" [formGroup]="actualFormGroup" (ngSubmit)="submitForm()" class="data-form">
  ...

  <div class="button-wrapper">
    <button class="classic-purple-button cursor-pointer no-outline" [disabled]="!actualFormGroup.valid" type="submit">
        Continuar
    </button>
  </div>
</form>

Angular 6-从表单外部验证并提交表单

5 个答案: