Блог

У меня есть угловая форма с двумя входами, именем пользователя и паролем, когда пользователь отправляет форму, значения отправляются с помощью 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 amp;amp; (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 amp;amp; (loginPassword.dirty || loginPassword.touched)">Password not inserted</div>
        <button class="btn btn-primary" type="submit">Login</button>
    </form>

 

Это мой форм-компонент.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']));
  }

}
 

Это мой пользователь.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);
  }
}
 

Это мой контроллер весеннего ОТДЫХА:

 @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());
    }
}
 

 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']));
}
 

вы можете использовать реактивные формы для обработки своей формы, гораздо проще работать с формами.

Это будет выглядеть так:

form-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, вам будет проще обрабатывать проверку в форме, а также очень полезно использовать одну и ту же форму для создания и обновления. (Вы можете заполнить входные данные при создании группы форм, пустая строка означает, что входные данные пусты).