JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app='simpleForm'>
<form name='myForm' ng-controller='AppCtrl as vm' ng-submit='vm.send()'>
<div>
<label>Name</label>
<input type="text" name=name ng-model='vm.model.name' required minlength=5/>
<div class=error ng-if="myForm.name.$error.required">required</div>
<div class=error ng-if="myForm.name.$error.minlength">5 symbols!!</div>
</div>
<div>
<label>Tel</label>
<input type="text" name=tel ng-model='vm.model.tel' required ng-pattern='/\d+/'/>
<div class=error ng-if="myForm.tel.$error.required">required</div>
<div class=error ng-if="myForm.tel.$error.pattern">not a number!!</div>
</div>
<div>
<label>Message</label>
<textarea name=message ng-model='vm.model.message' required></textarea>
<div class=error ng-if="myForm.message.$error.required">required</div>
</div>
<div>
<input type="submit" ng-disable="myForm.$invalid" />
</div>
</form>
</div>
CSS
div {
margin: 0 0 .5em 0;
}
div label {
width: 7em;
}
input[type="text"],
textarea {
width: 20em;
}
.error {
color: red;
}
JavaScript
angular.module('simpleForm', [])
.controller('AppCtrl', function() {
this.model = {
name: 'Vasya',
tel: 2128506,
message: 'Hello'
}
this.send = function() {
this.model = {};
// or
// this.model.name = '';
// this.model.tel = '';
// this.model.message = '';
}
});