penambahan form input add data device
This commit is contained in:
@@ -1,261 +1,232 @@
|
||||
<section id="basic-form-layouts">
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-md-6" *blockUI="'projectInfo'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadProjectInfo($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Project Info (Reactive Forms Validation)
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-text">
|
||||
<p>
|
||||
This is the most basic and default form having form sections. To
|
||||
add form section use
|
||||
<code>.form-section</code>
|
||||
class with any heading tags. This form has the buttons on the
|
||||
bottom left corner which is the default position.
|
||||
</p>
|
||||
</div>
|
||||
<form [formGroup]="projectInfo" (ngSubmit)="onProjectInfoSubmit()">
|
||||
<div class="form-body">
|
||||
<h4 class="form-section">
|
||||
<i class="feather ft-user"></i> Personal Info
|
||||
</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput1">First Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="projectinput1"
|
||||
class="form-control"
|
||||
formControlName="firstName"
|
||||
placeholder="First Name"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.firstName.errors
|
||||
}"
|
||||
/>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.firstName.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.firstName.errors.required">
|
||||
First Name is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput2">Last Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="projectinput2"
|
||||
class="form-control"
|
||||
formControlName="lastName"
|
||||
placeholder="Last Name"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.lastName.errors
|
||||
}"
|
||||
/>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.lastName.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.lastName.errors.required">
|
||||
Last Name is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput3">E-mail *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="projectinput3"
|
||||
class="form-control"
|
||||
formControlName="email"
|
||||
placeholder="E-mail"
|
||||
[ngClass]="{ 'is-invalid': submitted && f.email.errors }"
|
||||
/>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.email.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.email.errors.required">
|
||||
Email is required
|
||||
</div>
|
||||
<div *ngIf="f.email.errors.email">
|
||||
Email must be a valid email address
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput4">Contact Number *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="projectinput4"
|
||||
class="form-control"
|
||||
formControlName="phone"
|
||||
placeholder="Phone"
|
||||
[ngClass]="{ 'is-invalid': submitted && f.phone.errors }"
|
||||
(keypress)="keyPress($event)"
|
||||
/>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.phone.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.phone.errors.required">
|
||||
phone is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="form-section">
|
||||
<i class="la la-paperclip"></i> Requirements
|
||||
</h4>
|
||||
<div class="form-group">
|
||||
<label for="companyName">Company *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="companyName"
|
||||
class="form-control"
|
||||
formControlName="company"
|
||||
placeholder="Company Name"
|
||||
[ngClass]="{ 'is-invalid': submitted && f.company.errors }"
|
||||
/>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.company.errors"
|
||||
class="invalid-feedback"
|
||||
<div class="app-content content">
|
||||
<div class="content-overlay"></div>
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row"></div>
|
||||
<div class="content-body">
|
||||
<section id="basic-form-layouts">
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-md-6" *blockUI="'projectInfo'; message: 'Loading'">
|
||||
<m-card
|
||||
[options]="options"
|
||||
(reloadFunction)="reloadProjectInfo($event)"
|
||||
>
|
||||
<ng-container mCardHeaderTitle>
|
||||
Project Info (Reactive Forms Validation)
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<form
|
||||
[formGroup]="projectInfo"
|
||||
(ngSubmit)="onProjectInfoSubmit()"
|
||||
>
|
||||
<div *ngIf="f.company.errors.required">
|
||||
Company is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput5">Interested in *</label>
|
||||
<select
|
||||
id="projectinput5"
|
||||
class="form-control"
|
||||
formControlName="interestedIn"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.interestedIn.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let interest of interestedIn"
|
||||
[value]="interest"
|
||||
<div class="form-body">
|
||||
<h4 class="form-section">
|
||||
<i class="feather ft-user"></i> General Information
|
||||
</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput1">First Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="projectinput1"
|
||||
class="form-control"
|
||||
formControlName="firstName"
|
||||
placeholder="First Name"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.firstName.errors
|
||||
}"
|
||||
/>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.firstName.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.firstName.errors.required">
|
||||
First Name is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput2">Last Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="projectinput2"
|
||||
class="form-control"
|
||||
formControlName="lastName"
|
||||
placeholder="Last Name"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.lastName.errors
|
||||
}"
|
||||
/>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.lastName.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.lastName.errors.required">
|
||||
Last Name is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput3">E-mail *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="projectinput3"
|
||||
class="form-control"
|
||||
formControlName="email"
|
||||
placeholder="E-mail"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.email.errors
|
||||
}"
|
||||
/>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.email.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.email.errors.required">
|
||||
Email is required
|
||||
</div>
|
||||
<div *ngIf="f.email.errors.email">
|
||||
Email must be a valid email address
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput4">Contact Number *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="projectinput4"
|
||||
class="form-control"
|
||||
formControlName="phone"
|
||||
placeholder="Phone"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.phone.errors
|
||||
}"
|
||||
(keypress)="keyPress($event)"
|
||||
/>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.phone.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.phone.errors.required">
|
||||
phone is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="form-section">
|
||||
<i class="la la-paperclip"></i> Energy Information
|
||||
</h4>
|
||||
<div class="form-group">
|
||||
<label for="companyName">Company *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="companyName"
|
||||
class="form-control"
|
||||
formControlName="company"
|
||||
placeholder="Company Name"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.company.errors
|
||||
}"
|
||||
/>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.company.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
{{ interest }}
|
||||
</option>
|
||||
</select>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.interestedIn.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.interestedIn.errors.required">
|
||||
Interest is required
|
||||
<div *ngIf="f.company.errors.required">
|
||||
Company is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput5">Interested in *</label>
|
||||
<select
|
||||
id="projectinput5"
|
||||
class="form-control"
|
||||
formControlName="interestedIn"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.interestedIn.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let interest of interestedIn"
|
||||
[value]="interest"
|
||||
>
|
||||
{{ interest }}
|
||||
</option>
|
||||
</select>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.interestedIn.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.interestedIn.errors.required">
|
||||
Interest is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput6">Budget *</label>
|
||||
<select
|
||||
id="projectinput6"
|
||||
class="form-control"
|
||||
formControlName="budget"
|
||||
[ngClass]="{ 'is-invalid': submitted && f.budget.errors }"
|
||||
>
|
||||
<option *ngFor="let range of budget" [value]="range">
|
||||
{{ range }}
|
||||
</option>
|
||||
</select>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.budget.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.budget.errors.required">
|
||||
Budget is required
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput6">Budget *</label>
|
||||
<select
|
||||
id="projectinput6"
|
||||
class="form-control"
|
||||
formControlName="budget"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.budget.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let range of budget"
|
||||
[value]="range"
|
||||
>
|
||||
{{ range }}
|
||||
</option>
|
||||
</select>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.budget.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.budget.errors.required">
|
||||
Budget is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Select File</label>
|
||||
<label id="projectinput7" class="file center-block">
|
||||
<input
|
||||
type="file"
|
||||
id="file"
|
||||
formControlName="selectFile"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.selectFile.errors
|
||||
}"
|
||||
style="margin-left: 3px"
|
||||
/>
|
||||
<span class="file-custom"></span>
|
||||
</label>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.selectFile.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.selectFile.errors.required">
|
||||
File is required
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-warning mr-1" (click)="cancel()">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="projectinput8">About Project *</label>
|
||||
<textarea
|
||||
id="projectinput8"
|
||||
rows="5"
|
||||
class="form-control"
|
||||
formControlName="aboutProject"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.aboutProject.errors
|
||||
}"
|
||||
placeholder="About Project"
|
||||
></textarea>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.aboutProject.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.aboutProject.errors.required">
|
||||
Project Description is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</form>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- END: Content-->
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, ViewChild } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
import { BlockUI, NgBlockUI } from 'ng-block-ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-add-edit-device',
|
||||
@@ -6,9 +9,106 @@ import { Component } from '@angular/core';
|
||||
styleUrls: ['./add-edit-device.component.css']
|
||||
})
|
||||
export class AddEditDeviceComponent {
|
||||
|
||||
|
||||
constructor() { }
|
||||
@ViewChild('f', { read: true }) userProfileForm: NgForm;
|
||||
|
||||
model: any = {};
|
||||
|
||||
@BlockUI('projectInfo') blockUIProjectInfo: NgBlockUI;
|
||||
@BlockUI('userProfile') blockUIUserProfile: NgBlockUI;
|
||||
|
||||
options = {
|
||||
minimize: true,
|
||||
reload: true,
|
||||
expand: true,
|
||||
close: true
|
||||
};
|
||||
public breadcrumb: any;
|
||||
|
||||
projectInfo: FormGroup;
|
||||
|
||||
submitted = false;
|
||||
|
||||
interestedIn = ['design', 'development', 'illustration', 'branding', 'video'];
|
||||
budget = ['less than 5000$', '5000$ - 10000$', '10000$ - 20000$', 'more than 20000$'];
|
||||
priority = ['Low', 'Medium', 'High'];
|
||||
status = ['Not Started', 'Started', 'Fixed'];
|
||||
|
||||
constructor(private formBuilder: FormBuilder, private router: Router) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Basic Forms',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Form Layouts',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Basic Forms',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.projectInfo = this.formBuilder.group({
|
||||
firstName: ['', Validators.required],
|
||||
lastName: ['', Validators.required],
|
||||
email: ['', [Validators.required, Validators.email]],
|
||||
phone: ['', Validators.required],
|
||||
company: ['', Validators.required],
|
||||
interestedIn: ['', Validators.required],
|
||||
budget: ['', Validators.required],
|
||||
selectFile: [, Validators.required],
|
||||
aboutProject: ['', Validators.required],
|
||||
});
|
||||
}
|
||||
|
||||
get f() {
|
||||
return this.projectInfo.controls;
|
||||
}
|
||||
|
||||
onProjectInfoSubmit() {
|
||||
this.submitted = true;
|
||||
|
||||
if (this.projectInfo.invalid) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
reloadProjectInfo() {
|
||||
this.blockUIProjectInfo.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIProjectInfo.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadUserProfile() {
|
||||
this.blockUIUserProfile.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIUserProfile.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
keyPress(event: any) {
|
||||
const pattern = /[0-9\+\-\ ]/;
|
||||
|
||||
const inputChar = String.fromCharCode(event.charCode);
|
||||
if (event.keyCode !== 8 && !pattern.test(inputChar)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
cancel() {
|
||||
this.router.navigate(['/device']); // Adjust the path as per your routing setup
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -13,13 +13,10 @@
|
||||
(reloadFunction)="reloadAddRows($event)"
|
||||
>
|
||||
<ng-container mCardBody>
|
||||
<!-- <p class="card-text">New rows can be added to a DataTable very easily using the
|
||||
(addFieldValue()) function.
|
||||
</p> -->
|
||||
<button
|
||||
id="addRow"
|
||||
class="btn btn-secondary my-1 mb-2"
|
||||
(click)="addFieldValue()"
|
||||
[routerLink]="['/device/add-row']"
|
||||
>
|
||||
<i class="feather ft-plus"></i> Add new row
|
||||
</button>
|
||||
|
||||
@@ -40,6 +40,10 @@ import { ModalAddEditComponent } from './modal-add-edit/modal-add-edit.component
|
||||
{
|
||||
path: '',
|
||||
component: DeviceComponent
|
||||
},
|
||||
{
|
||||
path: 'add-row',
|
||||
component: AddEditDeviceComponent
|
||||
}
|
||||
])
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user