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

Posted 2023-04-13

【中文标题】“动作”属性在“Angular”模板中不起作用

【英文标题】："action" attribute is not working in "Angular" template

【发布时间】：2019-02-27 06:34:15

【问题描述】：

要求：

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

问题：

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

我的表格：

<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

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

【问题讨论】：

ohh .. 什么可能是替代解决方案，由于 CORS 问题，通过方法的选项似乎不是解决方案。

【参考方案1】：

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

<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 else Angular 将您的表单转换为 angular 形式

【讨论】：

感谢您的回复，但我在使用这种方式时收到“Access-Control-Allow-Origin”错误，因此无法使用此选项。有什么办法可以避免这种情况吗？