时间戳

首页 > 解决方案 > “动作”属性在“Angular”模板中不起作用

angular - “动作”属性在“Angular”模板中不起作用

问题描述

要求：

我需要使用联系人表单中的属性发布表单数据。actionAngular

问题：

如果我们使用此表单创建静态文件，则解决方案有效。但是在模板中使用时，属性action似乎不起作用。angular单击时似乎没有执行任何操作。

我的表格：

<form 
    id="gform" 
    action="https://script.google.com/sampleUrl" 
    method="POST" 
    [formGroup]="form" 
    fxLayout="column" 
    fxLayoutAlign="space-evenly stretch">
    <mat-form-field>
        <input type="text" matInput placeholder="Name" formControlName="name" name="Name" required>
        <mat-error *ngIf="form.get('name').invalid">Please enter a Name</mat-error>
    </mat-form-field>
    <mat-form-field>
        <input matInput placeholder="e-mail" formControlName="email" name="Email" required>
        <mat-error *ngIf="form.get('email').invalid">Please enter a valid e-mail</mat-error>
    </mat-form-field>
    <mat-form-field>
        <input matInput placeholder="Number" formControlName="number" name="Phone" required>
        <mat-error *ngIf="form.get('number').invalid">Please enter phone number</mat-error>
    </mat-form-field>
    <button type="submit" mat-raised-button color="primary" >Submit</button> -->
</form>

版本信息：

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.2.2
Node: 10.5.0
OS: win32 x64
Angular: 6.1.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.8.2
@angular/cdk                      6.4.7
@angular/cli                      6.2.2
@angular/flex-layout              6.0.0-beta.18
@angular/material                 6.4.7
@ngtools/webpack                  6.0.8
@schematics/angular               0.8.2
@schematics/update                0.8.2
rxjs                              6.3.2
typescript                        2.9.2
webpack                           4.8.3

注意：我正在尝试使用谷歌电子表格 api 写入谷歌文档。使用方法调用时面临 CORS 问题，

标签： angularformsform-dataangular-template

解决方案

通常，如果您想获取使用的数据（提交）

<form [formGroup]="form" (submit)="submit(form)">...</form>

如果您的 .ts

submit(form)
{
   if (form.valid)
     this.httpClient.post("https://script.google.com/sampleUrl",form.value)
         .subscribe(res=>console.log(res))
}

如果您想重定向到新页面，请使用简单的表单，但不要忘记写ngNoForm，https://angular.io/api/forms/NgForm否则 Angular 将您的表单转换为 Angular 的形式

推荐阅读