是否可以使用Angular5中的ViewChild提交表格？

是否可以用Angular5代码提交带有ViewChild的表单？怎么做
我试过了，但没有成功

HTML:

 <form #form="ngForm" (submit)="submitForm(form)" novalidate>
  <input required type="text" #codeRequest="ngModel" [(ngModel)]="requestModel.codeRequest" id="codeRequest" name="codeRequest"/>
 </form>

 <button (click)="func()"> </button>

---

我的问题在哪里œ

在表单中添加按钮的简单方法是

如果这不是你想要的方式，你必须采取其他的方法

您必须利用被动形式，并在代码中

func(){ 
    if(this.ngForm.valid){ 
        const formValues = this.ngForm.value;
        this.http.post(url,formValues).subscribe(x => { ... })
    }
}

---

要在表单外部使用按钮（type=submit）提交表单，可以执行以下操作

定义模型：

export interface Student {
  id: number;
  name: string;
}

在app.component.ts中：

  public model: Student;

  @ViewChild('form', { read: NgForm }) form: any;

  ngOnInit(): void {
    this.setDefaultValueForModel();
  }

  saveForm($event: Event) {
    $event.preventDefault();

    if (this.form.valid) {
       console.log(this.form.value);
       alert('valid');
     } else {
     alert('invalid');
   }
}

setDefaultValueForModel() {
  this.model = {
    id: 0,
    name: ''
  };

最后是app.component.html

   <form #form="ngForm" novalidate id="ngForm" (submit)="saveForm($event)">
    <div class="form-group">
      <label>Name</label>
      <input type="text" required name="name" [(ngModel)]="model.name" #name="ngModel">
      <p *ngIf="name.invalid && name.touched">
        Family is required.
      </p>
    </div>
  </form>

  <div>
    <button type="submit" form="ngForm" [disabled]="!form.form.valid">
      Save
    </button>
  </div>

名称

家庭是必需的。

拯救

---

您希望通过单击按钮提交表单，按钮位于表单外侧

以下是您的视图/html：

<div >
  <button (click)="onSubmit()">Submit from outside</button>

  <form [formGroup]="fooForm" (ngSubmit)="onNgSubmit()">
    <label>Label One:</label>
    <input formControlName = "fieldOne">

    <label>Label Two:</label>
    <input formControlName = "fieldTwo">

  </form>
</div>

---

如果要使用Angular，请使用HttpClient进行http调用。如果您想使用本机提交，为什么要使用Angular？请查看Angular文档。。。编辑：也许给你的按钮

type=“submit”

并在表单中实现它……）谢谢你的帮助，但是，我知道如何在第5页提交。但我不知道如何使用ViewChild@ibenjellounthanks调用submit以获得答复。是否可以使用ViewChild调用submit？angular的基础是避免获得基本行为并在控制器中实现这些行为，但不知道驱动模板表单的定义。但是试试@ViewChild（“form”）formE；如果表单的标记出现，请尝试使用console.log（this.formE）。也许吧。：）我有一个用例，其中submit按钮位于parent和parent的parent组件中。如何从父级和父级组件提交表单（在叶级中显示）？ViewChild不适合我。这里是stackblitz链接：为什么

（提交）

而不是

（ngSubmit）

？请在stackblitz上添加演示。我在答覆中也加入了这一点。

<div >
  <button (click)="onSubmit()">Submit from outside</button>

  <form [formGroup]="fooForm" (ngSubmit)="onNgSubmit()">
    <label>Label One:</label>
    <input formControlName = "fieldOne">

    <label>Label Two:</label>
    <input formControlName = "fieldTwo">

  </form>
</div>

export class YourComponent  {
  public fooForm: FormGroup;

  ngOnInit(){
    this.fooForm = new FormGroup({
      'fieldOne':new FormControl('value-one'),
      'fieldTwo':new FormControl('value-two')
    });
  }

  public onSubmit(){
    console.log("submitting from out side the form");
    this.onNgSubmit();
  }

  public onNgSubmit(){
    console.log(this.fooForm.value);
  }
}