JSFiddle - React, Tailwind, and code Playground

by indatawetrust

HTML

<html ng-app="jsAPP">
<body ng-controller="angularJS">
<form name="ekleForm" ng-submit="ekle(araba)" novalidate>
	<ul>
		<li ng-repeat="araba in arabalar">marka : {{ araba.marka }} fiyat : {{ araba.fiyat }}</li>
	</ul>
	<input type="text" ng-minlength="3" ng-maxlength="10" ng-pattern="pattern" ng-model="araba.marka" name="marka" ng-class="ekleForm.marka.$valid ? 'valid' : 'invalid'" required/>
	<input type="text" ng-minlength="3" ng-maxlength="10" ng-pattern="pattern" ng-model="araba.fiyat" name="fiyat" ng-class="ekleForm.fiyat.$valid ? 'valid' : 'invalid'" required/>
	<button type="submit">ekle</button>
</form>
</body>
</html>

CSS

.valid{
	background-color:green;
}

.invalid{
	background-color:red;
}

JavaScript

var app = angular.module('jsAPP',[]);
app.controller('angularJS',function($scope){
	$scope.arabalar = [];
	$scope.ekle = function(araba){
		$scope.arabalar.push({
			marka : araba.marka,
			fiyat : araba.fiyat
		});
	}
	$scope.pattern = new RegExp('^[a-z]');
});