When developing things like application forms or dashboards with grids, you may want to render some data in read-only mode to the end user. You can do this in two ways:
readonly
propertyHTML label control is read-only by default, but it doesn't look compelling in form and grid controls. So, it's better to use Angular's Out Of the Box (OOB) readonly
property. In this guide, we will apply the readonly
property through a real-world scenario. We will create a small form that will allow users to create technical events on any website (for example, Pluralsight.com).
To complete this guide, you must have the following:
Execute the following command to create an Angular project.
ng new readonly-demo
The next step is to install Twitter Bootstrap and jQuery and refer them in the project so you can use some of the form styles to make the form look good.
cd readonly-demo
npm i jquery
npm i bootstrap
In Visual Studio Code, open the file angular.json
.
styles
array before src/style.css
:"node_modules/bootstrap/dist/css/bootstrap.min.css",
scripts
array:"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
1import { BrowserModule } from '@angular/platform-browser';
2import { NgModule } from '@angular/core';
3import { FormsModule } from '@angular/forms';
4import { AppComponent } from './app.component';
5
6@NgModule({
7 declarations: [
8 AppComponent
9 ],
10 imports: [
11 BrowserModule,
12 FormsModule
13 ],
14 providers: [],
15 bootstrap: [AppComponent]
16})
17export class AppModule { }
Now the project is all set to develop the form.
ng generate component create-event
1import { Component, OnInit } from '@angular/core';
2
3@Component({
4 selector: 'app-create-event',
5 templateUrl: './create-event.component.html',
6 styleUrls: ['./create-event.component.css']
7})
8export class CreateEventComponent implements OnInit {
9 newEvent:any = {
10 baseUrl: 'https://www.events.pluralsight.com/angular/'
11 }
12
13 constructor() { }
14
15 ngOnInit(): void {
16 }
17
18 saveEvent(newEvent)
19 {
20 console.log(newEvent);
21 }
22
23 cancel()
24 {
25
26 }
27}
1<h1>New Event</h1>
2<hr>
3<div class="col-md-6">
4 <form #newEventForm="ngForm" (ngSubmit)="saveEvent(newEventForm.value)" autocomplete="off">
5 <div class="form-group">
6 <label for="eventName">Event Name:</label>
7 <input [(ngModel)]="newEvent.name" name="name" id="name" type="text" class="form-control" placeholder="Name of your event..." />
8 </div>
9 <div class="form-group">
10 <label for="eventDate">Event Date:</label>
11 <input [(ngModel)]="newEvent.date" name="date" id="eventDate" type="text" class="form-control" placeholder="format (mm/dd/yyyy)..." />
12 </div>
13 <div class="form-group">
14 <label for="eventTime">Event Time:</label>
15 <input [(ngModel)]="newEvent.time" name="time" id="eventTime" type="text" class="form-control" placeholder="start and end time..." />
16 </div>
17 <div class="form-group">
18 <label for="eventPrice">Event Price:</label>
19 <input [(ngModel)]="newEvent.price" name="price" id="eventPrice" type="text" type="number" class="form-control" placeholder="event price..." />
20 </div>
21 <div class="form-group" style="overflow: hidden;">
22 <label style="display: block;" for="onlineUrl">Online Url:</label>
23 <div style="float: left; width: 49%;">
24 <input type="text" [(ngModel)]="newEvent.baseUrl" name="baseUrl" id="baseUrl" class="form-control" placeholder="Base Url..."/>
25 </div>
26 <div style="float:right; width: 49%;">
27 <input [(ngModel)]="newEvent.onlineUrl" name="onlineUrl" id="onlineUrl" type="text" class="form-control" placeholder="Event Url..." />
28 </div>
29 </div>
30 <button type="submit" class="btn btn-primary">Save</button>
31 <button type="button" [disabled]="newEventForm.invalid" class="btn btn-default" (click)="cancel()">Cancel</button>
32 </form>
33</div>
1<app-create-event></app-create-event>
ng serve
http://localhost:4200
. Online URL
field. The first text box is writable, and it should be rendered as read-only so users are not able to edit the base URL of the event. So let's do that.[readonly]="true"
The final code should look like below:
<input type="text" [(ngModel)]="newEvent.baseUrl" name="baseUrl" id="baseUrl" class="form-control" placeholder="Base Url..." [readonly]="true"/>
Congratulations!! You have learned:
input
element For more information, please refer to the following resources: