AngularJS Form Builder. Build Model Driven forms like in Angular with Form Builder and Model Driven approach.
npm install @ynikolov/ngformbuilderngFormBuilder - AngularJS
====================
Build more powerful Model Driven Forms.
In Controller
``javascript
app.controller('MainCtrl', ['$scope', 'ngFormBuilderService',
function($scope, fb) {
$scope.formGroup = fb.group({
name: ['']
});
$scope.submitForm = function () {
console.log($scope.formGroup);
}
}
])
`
In Template
`html`
javascript
app.controller('MainCtrl', ['$scope', 'ngFormBuilderService',
function($scope, fb) { $scope.formGroup = fb.group({
ingredients: fb.array([]),
});
$scope.add = function () {
$scope.formGroup.controls.ingredients.controls.push(fb.group({
name: [''],
quantity: [0]
}));
};
// Add first ingredient on Init
$scope.add();
$scope.remove = function (index) {
$scope.formGroup.controls.ingredients.removeAt(index);
};
$scope.submitForm = function () {
console.log($scope.formGroup);
}
}
])
`In Template
html
`Validators
In Controller
javascript
app.controller('MainCtrl', ['$scope', 'ngFormBuilderService', 'ngFormBuilderValidators',
function($scope, fb, Validators) { $scope.formGroup = fb.group({
name: ['', [Validators.required, Validators.minLength(3)]]
});
$scope.submitForm = function () {
console.log($scope.formGroup);
}
}
])
`In Template
html
`$3
- .required
- .minLength(number)
- .maxLength(number)
- .min(number)
- .max(number)
- .pattern(RegExp)
- .email(string)
Async Validators (Custom)
In Controller
javascript
app.controller('MainCtrl', ['$scope', 'ngFormBuilderService', 'ngFormBuilderValidators', 'UserService',
function($scope, fb, Validators, User) { $scope.isUniqueUsername = function (control) {
return User.checkUsername(control.value).then(function (response) {
return response.isUnique ? null : { isUniqueUsername: true };
});
}
$scope.formGroup = fb.group({
username: ['', null, $scope.isUniqueUsername]
});
$scope.submitForm = function () {
console.log($scope.formGroup);
}
}
])
``