如何从 Angular 形式中修剪值？

Question

我有一个带有两个输入（用户名和密码）的 Angular 表单，当用户提交表单时，这些值将通过 POST 发送到 Spring Boot REST 控制器。我想在将数据发送到控制器之前对其进行修剪，但我找不到如何做到这一点。

这是我的 form-component.html：

    <form  #loginForm="ngForm" (ngSubmit)="onSubmit()" name="loginForm">
        <input required ngModel [(ngModel)]="user.username" name="loginUsername" #loginUsername="ngModel" type="text" placeholder="Username">
        <div class="alert alert-danger" role="alert" *ngIf="loginUsername.invalid && (loginUsername.dirty || loginUsername.touched)">Username not inserted</div>
        <input required ngModel [(ngModel)]="user.password" name="loginPassword" #loginPassword="ngModel" type="text" placeholder="Password">
        <div class="alert alert-danger" role="alert" *ngIf="loginPassword.invalid && (loginPassword.dirty || loginPassword.touched)">Password not inserted</div>
        <button class="btn btn-primary" type="submit">Login</button>
    </form>

这是我的 form-component.ts：

export class LoginFormComponent implements OnInit{

  user: User;

  constructor(private route: ActivatedRoute, 
    private router: Router, 
      private login: LoginService){
    this.user = new User();
  };

  ngOnInit(): void { };

  onSubmit() {
    this.login.send(this.user).subscribe(result => this.router.navigate(['/http://localhost:8080/login']));
  }

}

这是我的 user.ts：

export class User {

    username: string;
    password: string;

    constructor(){
        this.username = "";
        this.password = "";
    }
    
}

这是我的登录服务.ts：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from '../classes/user';

@Injectable({
  providedIn: 'root'
})
export class LoginService {

  private loginUrl: string;

  constructor(private http: HttpClient) {
    this.loginUrl = 'http://localhost:8080/login';
   }

   public send(user: User) {
    return this.http.post<User>(this.loginUrl, user);
  }
}

这是我的 Spring REST 控制器：

@EnableDiscoveryClient
@SpringBootApplication
@RestController
@RequestMapping
@CrossOrigin(origins = "http://localhost:4200")
public class ApiGatewayApplication {

    public static void main(String[] args) {
        SpringApplication.run(ApiGatewayApplication.class, args);
    }

    @PostMapping("/login")
    public void postUser(@RequestBody User user) {
        System.out.println("Username:" + user.getUsername());
        System.out.println("Password:" + user.getPassword());
    }
}

Answer 1

您可以使用反应式表单来处理表单，处理表单要简单得多。

它看起来像这样：

表单组件.html：

<form  [formGroup]="loginForm" (ngSubmit)="onSubmit()" name="loginForm">
        <input required name="loginUsername" type="text" placeholder="Username" formControlName="username">
        <div class="alert alert-danger" role="alert" *ngIf="!formGroup.get('username').valid formGroup.get('username').touched)">Username not inserted</div>
        <input required name="loginPassword" type="text" placeholder="Password" formControlName="password">
        <div class="alert alert-danger" role="alert" *ngIf="!formGroup.get('password').valid formGroup.get('password').touched)">Password not inserted</div>
        <button class="btn btn-primary" type="submit">Login</button>
    </form>

表单组件.ts：

    import { FormGroup, FormControl } from '@angular/forms';
        export class LoginFormComponent implements OnInit{
        
          user: User;
loginForm = new FormGroup({
    username: new FormControl('', [TrimFormControl]),
    password: new FormControl('', [TrimFormControl]),
  });
        
          constructor(private route: ActivatedRoute, 
            private router: Router, 
              private login: LoginService){
            this.user = new User();
          };
        
          ngOnInit(): void { };
        
          onSubmit() {
            this.login.send(this.loginForm. getRawValue()).subscribe(result => this.router.navigate(['/http://localhost:8080/login']));
          }
        
        }

然后您可以创建一个自定义验证器来自动修剪您的输入。

自定义验证器：

export class TrimFormControl extends FormControl {
    private _value!: string | null;

    get value(): string | null {
        return this._value;
    }

    set value(value: string | null) {
        this._value = value ? value.trim() : value;
    }
}

您将其放入上面创建表单组的数组中。在 Angular 中使用响应式表单也是一个很好的做法，它可以让您更轻松地处理表单中的验证，并且使用相同的表单来创建和更新也非常有用。（您可以在创建表单组时填充输入，空字符串表示输入为空）。