将带有角度的表单提交到 Json 文件

Question

我想提交我的表单并有一个方法来使用我新创建的用户更新我的表。

从今天早上开始我就被困住了。

我已经有一个删除方法，但是错过了创建方法

这是我的html

<div class="manage-content">
  <div class="title">
    <mat-icon class="user-icon">how_to_reg</mat-icon>
    <h3>Create a user</h3>
  </div>
      <form [formGroup]="form" (ngSubmit)="onSubmit()">
        Value : {{form.value | json}}
        <div class="form">
        <div class="leftSide">
        <mat-form-field class="full-width-input" appearance="outline">
          <input id="firstName" matInput placeholder="First name" formControlName="f_name" #f_name>
          <mat-error *ngIf="isFieldInvalid('f_name')">
            The first name you've entered is malformed.
          </mat-error>
        </mat-form-field>
        <mat-form-field class="full-width-input" appearance="outline">
          <input id="middleName" matInput placeholder="Middle name" formControlName="m_name" #m_name>
          <mat-error *ngIf="isFieldInvalid('m_name')">
            The middle name you've entered is malformed.
          </mat-error>
        </mat-form-field>
        <mat-form-field class="full-width-input" appearance="outline">
          <input id="lastName" matInput placeholder="Last name" formControlName="l_name" #l_name>
          <mat-error *ngIf="isFieldInvalid('l_name')">
            The last name you've entered is malformed.
          </mat-error>
        </mat-form-field>
        <mat-form-field class="full-width-input" appearance="outline">
          <input id="email" matInput placeholder="Email" formControlName="email" #email>
          <mat-error *ngIf="isFieldInvalid('email')">
            The email you've entered is malformed.
          </mat-error>
        </mat-form-field>
        <mat-form-field class="full-width-input" appearance="outline">
          <div class="visibility">
        <input id="password" matInput type="password" placeholder="Password" formControlName="password">
            <mat-icon class="eye" *ngIf="isPasswordVisible" (click)=showPassword()>visibility</mat-icon>
            <mat-icon class="eyeClosed" *ngIf="!isPasswordVisible" (click)="showPassword()">visibility_off</mat-icon>
          </div>
                  <mat-error *ngIf="isFieldInvalid('password')">
                    The password you've entered is malformed.
                  </mat-error>
      </mat-form-field>
        </div>
        <div class="cta-btn">
          <button mat-raised-button class="createUserBtn" color="primary" type="submit" (click)="onSubmit()">Create user</button>
          <button mat-raised-button class="createUserBtn" color="warn" type="submit" (click)="click()">Cancel</button>
        </div>
      </form>
</div>

这是我的 TS 文件 这只是我方法的一部分（正在进行中）

 onSubmit() {
      if (this.form.valid) {
        //TODO implement method to post data to API
        this.dialogRef.close(this.form.value);
        this.formSubmitAttempt = true;
        const Toast = Swal.mixin({
          toast: true,
          position: 'top-end',
          showConfirmButton: false,
          timer: 3000
        })
        Toast.fire({
          type: 'success',
          title: 'User created'
        })
      }

非常感谢您的帮助

Answer 1

使用 [(ngModel)] 将表单控件绑定到您在 ts.xml 中声明的对象。 在 onSubmit() 方法中，您可以对该对象执行任何操作（发布请求、插入到数据库...）。

Answer 2

我建议不要使用onSubmit，而是使用绑定了这样一个函数的按钮

`submitForm() {
    dataToPost = this.form.value;
     // data is the responce data from the backend when a  user created successfully
     // data shall be the created user only the backend knows this info
     this.hhtpClient.post(this.url, dataToPost).subscribe( data => { 
     this.form.get('m_name').setValue(data.m_name);
     this.form.get('l_name').setValue(data.l_name);
     this.form.get('email.).setValue(data.email);
     // add all controls you want to update after http response
    }
}`

`