@hicoder/angular-cli/templates/schema-edit.component.html

Angular UI componenets and service generator. It works with the mean-rest-express package to generate the end to end web application. The input to this generator is the Mongoose schema defined for the express application. mean-rest-express exposes the Res

<div class="edit" *ngIf="detail">
	<div class="card" style="text-align: left;">
		<div class="card-body">
			<h4 class="card-title" *ngIf="!embeddedView && !options['title']">{{action}} <%-SchemaCamelName%></h4>
			<h4 class="card-title" *ngIf="options['title']" [ngStyle]="style['card-title']">
				{{options['title']}}
			</h4>
			<p	*ngIf="options['subtitle']" [ngStyle]="style['card-subtitle']">
				{{options['subtitle']}}
			</p>
			<form (ngSubmit)="onSubmit()" #editForm="ngForm">
				<ng-template [ngIf]="action == 'Edit'"><%_
					editView.forEach( (field) => {
						if (field.hidden) return;
						if (field.exclusiveRequiredWith) return;

						let fn=field.fieldName, ft = field.type, fD=field.displayName, Fn=field.FieldName;
						let sn=schemaName, Sn=SchemaName, mn=moduleName, Mn=ModuleName;
						let fieldObj = {field, fn, fD, ft, ref_link: true,};%>
					<ng-template [ngIf]="!hiddenFields.includes('<%-fn%>')">
				<fieldset class="mb-3">
					<label for="Edit<%-Fn%>" class="form-label"><%-fD%></label><%
					if (field.important) {%>
					<span><i data-bs-toggle="tooltip" title="<%-field.important%>" class="fas fa-exclamation-circle important-tip"></i></span><%}%><%
					if (field.description) {%>
					<span><i data-bs-toggle="tooltip" title="<%-field.description%>" class="far fa-question-circle"></i></span><%}%><%

					if (field.meta.readOnly) {%>
					<div><%- include(`/ui/${uiFramework}/${uiDesign}/schema-display.field-wrap.html`, fieldObj); %>
					</div><%_}
					else {%>
						<%- include('schema-edit.field-wrap.html', {field, fn, ft, fD, Fn, sn, Sn, mn, Mn, fieldObj,}) %><%}%>
				</fieldset>
					</ng-template><%
					}) %>
					<div class="action-buttons-center"><%
						if (editActionButtons[0]) {%>
						<button type="button" class="btn btn-success" [disabled]="!editForm.form.valid" (click)="onSubmit()"><%-editActionButtons[0]%></button><%}%><%
						if (editActionButtons[1]) {%>
						<button *ngIf="!options['disableCancel']" class="btn btn-outline-success" type="button" (click)="editCancel()"><%-editActionButtons[1]%></button><%}%>
					</div>
				</ng-template>
				<ng-template [ngIf]="action == 'Create' || action == 'Add' "><%_
					createView.forEach( (field) => {
						if (field.hidden) return;
						if (field.exclusiveRequiredWith) return;

						let fn=field.fieldName, ft = field.type, fD=field.displayName, Fn=field.FieldName;
						let sn=schemaName, Sn=SchemaName, mn=moduleName, Mn=ModuleName;
						let fieldObj = {field, fn, fD, ft, ref_link: true,};%>
					<ng-template [ngIf]="!hiddenFields.includes('<%-fn%>')">
						<fieldset class="mb-3">
							<label for="Edit<%-Fn%>" class="form-label"><%-fD%></label><%
							if (field.important) {%>
							<span><i data-bs-toggle="tooltip" title="<%-field.important%>" class="fas fa-exclamation-circle important-tip"></i></span><%}%><%
							if (field.description) {%>
							<span><i data-bs-toggle="tooltip" title="<%-field.description%>" class="far fa-question-circle"></i></span><%}%><%

							if (field.meta.readOnly) {%>
							<div><%- include(`/ui/${uiFramework}/${uiDesign}/schema-display.field-wrap.html`, fieldObj); %>
							</div><%_}
							else {%>
								<%- include('schema-edit.field-wrap.html', {field, fn, ft, fD, Fn, sn, Sn, mn, Mn, fieldObj,}) %><%}%>
						</fieldset>
					</ng-template><%
					}) %>
					<div class="action-buttons-center"><%
						if (createActionButtons[0]) {%>
						<button type="button" class="btn btn-success" [disabled]="!editForm.form.valid" (click)="onSubmit()"><%-createActionButtons[0]%></button><%}%><%
						if (createActionButtons[0]) {%>
						<button *ngIf="!options['disableCancel']" class="btn btn-outline-success" type="button" (click)="editCancel()"><%-createActionButtons[1]%></button><%}%>
					</div>
				</ng-template>
			</form>
		</div>
	</div>
</div>