DEV Community

Faisal Ahmed
Faisal Ahmed

Posted on

Validators code template

  <form [formGroup]="dataForm" (ngSubmit)="onSubmit()">
    <div class="form-field form-field-name">
      <label>Full Name</label>

      <input [class]="dataForm.get('name').touched && dataForm.get('name').invalid ? 'invalid':''"
        formControlName="name" type="text" placeholder="Full Name" />

      <div class="sub-btn">
        <button type="submit">Next</button>
      </div>
    </div>
  </form>
Enter fullscreen mode Exit fullscreen mode
export class DashboardActivityPage implements OnInit {

  dataForm: FormGroup;


  constructor(
    private fb: FormBuilder,
  ) { }

  ngOnInit() {

    this.onInitForm();
  }

  onInitForm() {
    this.dataForm = this.fb.group({
      name: [null, Validators.required],

    })
  }

  onSubmit() {}

}
Enter fullscreen mode Exit fullscreen mode
.invalid {
    border: 1px solid red !important;
    background-color: rgb(255 0 0 / 9%) !important;
}
Enter fullscreen mode Exit fullscreen mode
@NgModule({
  imports: [
    FormsModule,
    ReactiveFormsModule,

  ],
Enter fullscreen mode Exit fullscreen mode

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay