<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)