apt-maintenance-account/src/app/users/detail.component.html

Apartment Maintenance Account Tracking Application - Client Side in Angular

<div *ngIf="model" class="container">
	<h2>{{title}}</h2>

	<form (ngSubmit)="save()" #detailForm="ngForm" class="grid-form">
		<fieldset>
			<legend>{{userd}}</legend>
				<div data-row-span="1">
					<div data-field-span="1">
						<label for="userName">Username</label>
						<input
							type="text"
							id="userName"
							required
							[(ngModel)]="model.name"
							name="userName"
							#userName="ngModel"
							placeholder="<user name here>"
							title="Username for login purposes">
							<div
								[hidden]="userName.valid || userName.pristine"
								class="alert alert-danger"
								>Username is required</div>
					</div>
				</div>
				<div data-row-span="2">
					<div data-field-span="1">
						<label for="flat-number">Flat / Apartment Number</label>
						<input
							type="text"
							id="flat-number"
							[(ngModel)]="infos.flatNumber"
							name="flat-number"
							placeholder="<enter Flat number, if applicable>"
							title="Flat or Apartment number, User residing at">
					</div>

					<div data-field-span="1">
						<label
							for="resident-type"
							>Resident Type <i *ngIf="!residentTypeSelected" class="notselected"><< Required</i></label>
						<input
							type="radio"
							id="resident-type"
							[(ngModel)]="infos.residentType"
							name="resident-type"
							value="owner"
							title="Owner"> Owner
						<input
							type="radio"
							[(ngModel)]="infos.residentType"
							name="resident-type"
							value="tenant"
							title="Tenant"> Tenant
						<input
							type="radio"
							[(ngModel)]="infos.residentType"
							name="resident-type"
							value="NA"
							title="Tenant"> Not Applicable
					</div>
				</div>

			<div data-row-span="2">
				<div data-field-span="1">
					<label for="firstName">FirstName</label>
					<input
						type="text"
						id="firstName"
						required
						[(ngModel)]="model.first_name"
						name="firstName"
						#firstName="ngModel"
						placeholder="<first name here>"
						title="First Name of the user">
						<div
							[hidden]="firstName.valid || firstName.pristine"
							class="alert alert-danger"
							>First Name is required</div>
				</div>

				<div data-field-span="1">
					<label for="lastName">LastName</label>
					<input
						type="text"
						id="lastName"
						required
						[(ngModel)]="model.last_name"
						name="lastName"
						#lastName="ngModel"
						placeholder="<last name here>"
						title="Last Name of the user">
						<div
							[hidden]="lastName.valid || lastName.pristine"
							class="alert alert-danger"
							>Last Name is required</div>
				</div>
			</div>

			<div data-row-span="2">
				<div data-field-span="1">
					<label for="eMail">email</label>
					<input
						type="email"
						id="eMail"
						required
						[(ngModel)]="model.email"
						name="eMail"
						#eMail="ngModel"
						email
						placeholder="<email id here>"
						title="eMail ID of the User">
						<div
							[hidden]="eMail.valid || eMail.pristine"
							class="alert alert-danger"
							>eMail ID is required</div>
				</div>

				<div data-field-span="1">
					<label for="passWord">Password</label>
					<input *ngIf="canAdd"
						type="password"
						id="passWord"
						required
						[(ngModel)]="password"
						name="passWord"
						#passWord="ngModel"
						placeholder="<enter password here>"
						title="Password is required">
						<div *ngIf="canAdd"
							[hidden]="passWord.valid || passWord.pristine"
							class="alert alert-danger"
							>Password is required</div>
					<input *ngIf="canEdit"
						type="password"
						id="passWord"
						[(ngModel)]="password"
						name="passWord"
						#passWord="ngModel"
						placeholder="<modify password here>"
						title="If needed, password can be modified here">
				</div>
			</div>

			<div data-row-span="2">
				<div data-field-span="1">
					<label for="oEmails">Other email-ids</label>
					<textarea
						rows="2"
						[(ngModel)]="infos.otherEmails"
						name="oEmails"
						placeholder="example1@email.id, example2@email.id"
						title="Other eMail IDs of the User"></textarea>
				</div>
				<div data-field-span="1">
					<label for="cells">Mobile/Landline Numbers</label>
					<textarea
						rows="2"
						[(ngModel)]="infos.cellNumbers"
						name="cells"
						placeholder="eg: 9797097970, 044-27273030"
						title="Mobile or Landline Phone numbers of the User"></textarea>
				</div>
			</div>

			<div data-row-span="2">
				<div data-field-span="1">
					<label for="twowheelers">Regn No. of 2-wheeler(s) parked</label>
					<textarea
						rows="2"
						[(ngModel)]="infos.twoWheelers"
						name="twowheelers"
						placeholder="eg: TN 11 CY 1234, TN 01 AZ 9876"
						title="Registration Number of Two Wheelers parked by the User"></textarea>
				</div>
				<div data-field-span="1">
					<label for="fourwheelers">Regn No. of 4-Wheeler(s) parked</label>
					<textarea
						rows="2"
						[(ngModel)]="infos.fourWheelers"
						name="fourwheelers"
						placeholder="eg: TN 22 A 4567, TN 02 BD 789"
						title="Registration Number of Four Wheelers parked by the User"></textarea>
				</div>
			</div>

			<div data-row-span="1">
				<div data-field-span="1">
					<label for="emergency">Emergency Contact Details</label>
					<textarea
						rows="2"
						[(ngModel)]="infos.emergencyContact"
						name="emergency"
						placeholder="In case of emergency, whom to approach (such as relatives, friends), enter their name, address, or phone numbers here"
						title="Contact phone numbers in case of emergencies"></textarea>
				</div>
			</div>

		</fieldset>

		<br />

		<button
			type="submit"
			class="btn btn-success"
			[disabled]="!detailForm.form.valid"
			[hidden]="hideSave"
			title="Save changes made"
			><i class="fa fa-floppy-o" aria-hidden="true"></i> Save</button>

		<button
			type="button"
			class="btn btn-link"
			(click)="cancel()"
			title="Cancel changes made"
			><i class="fa fa-times" aria-hidden="true"></i> Cancel</button>

	</form>

</div>