如何從Angular形式修剪值？

我有一個帶有兩個輸入的 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());
    }
}

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

您可以使用反應式表單來處理表單，處理表單要簡單得多。

它看起來像這樣：

表單component.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 中使用反應式表單也是一個很好的做法，它更容易處理表單中的驗證，并且使用相同的表單來創建和更新也非常有用。（您可以在創建表單組時填充輸入，空字串表示輸入為空）。

標籤：有角的 春天 形式 休息

上一篇：如何防止表單欄位被清除？

下一篇：如何使用本地存盤在網頁之間傳輸值？