Angular, Disable button validator

Question

I hope you have a great day.

I'm getting stuck within creating a validator funciton. I want to disable a button if the text area is empty or if it contains "\n\n/Admin".

What I have done now is :

.html file

    <textarea class="g-input form-control" formControlName="messageBody" id="messageBody" tabindex="0" rows="4">
    </textarea>

    <button data-color="purple" type="submit" [disabled]="">
      <div>Send</div>
    </button>

.ts file

  initForm() {
this.form = this.fb.group({
  messageBody: [`\n\n/admin`, Validators.required, ]
});

I would really apprecaite if someone could help. Have a wounderful day.

Try [disabled]="form.invalid". See how that works for you. — OctavianM
– OctavianM, Commented Apr 21, 2022 at 9:37
angular documentation has exactly what you need: angular.io/guide/form-validation and specifically the forbiddenNameValidator which is used as an example there of a custom validator: angular.io/guide/form-validation#defining-custom-validators — AVJT82
– AVJT82, Commented Apr 21, 2022 at 9:41

Muthukumar · Accepted Answer · 2022-04-21 10:35:47Z

.ts file should be like below

import { Component, VERSION, OnInit } from '@angular/core';
import {
  AbstractControl,
  FormBuilder,
  FormGroup,
  ValidatorFn,
  Validators,
} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  form: FormGroup;
  constructor(private fb: FormBuilder) {}
  ngOnInit() {
    this.initForm();
  }
  initForm() {
    this.form = this.fb.group({
      messageBody: [`\n\n/Admin`,[Validators.required,this.validateMessageBody()]],
    });
  }

  validateMessageBody(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
      if(control.value){
        if(control.value.search('\n\n/Admin') !==-1){
          return { invalidMessageBody: { value: control.value }};
        }
        return null;
      }
      return null;
    };
  }
  get messageBody() {
    return this.form.get('messageBody');
  }
}

.html file should be like below

<form [formGroup]="form">
<textarea class="g-input form-control" formControlName="messageBody" id="messageBody" tabindex="0" rows="4">
</textarea>
<button data-color="purple" type="submit" [disabled]="messageBody?.errors?.required || messageBody?.errors?.invalidMessageBody">
  <div>Send</div>
</button>

</form>

View demo https://angular-ivy-cijsfx.stackblitz.io

Collectives™ on Stack Overflow

Angular, Disable button validator

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related