html Angular：反应表单和表单验证

Posted 2021-05-10

form: FormGroup;

constructor(private _fb: FormBuilder) {}

ngOnInit() {
  this.form = new FormGroup({
    title: new FormControl('', [Validators.required, Validators.maxLength(75)]),
  });
  
  // FormBuilder an approach
  this.form = this._fb.group({
    title: [null, [
      Validators.required,
      Validators.minLength(5),
      Validators.maxLength(255),
      Validators.pattern('^[^ ][0-9a-zA-Zа-яА-Я() ]*')
    ]]
  });
  
}

onSubmit() {
  console.log(this.form);
}

<form [formGroup]="form" (submit)="onSubmit()">
  <input type="text" formControlName="title">
  <button type="submit" [disabled]="form.invalid">Сохранить объявление</button>
</form>