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

Top comments (0)