Я использую Nebular в своем угловом приложении.
Я занимаюсь тем, что получаю информацию на моем JSON-сервере.
После этого я создаю nb-card, который содержит всю информацию, которую я получил от сервера, во многих небулярных элементах, таких как nb-select, input, nb-checkbox и т. Д. *
Вот и результат:
Как видите, у меня есть кнопка UPDATE.
Я хочу, чтобы эта кнопка была отключена, когда информация не меняется.
Таким образом, кнопка должна быть отключена при загрузке страницы, но после хотя бы одного изменения (например, я изменил вид спорта или снял один флажок), кнопка должна быть активной, потому что я что-то изменил.
HTML:
<h1>PRICE RULES</h1>
<button nbButton class="but" status='info'>ADD</button><br><br>
<div *ngIf='priceRules'>
<nb-card *ngFor='let pricerule of priceRules' style="float:left">
<nb-card-header>{{ pricerule.id }}</nb-card-header>
<nb-card-body>
<nb-select style="float:left" [(selected)]='pricerule.activity' placeholder='Activity' status='info'>
<nb-option value='Tennis'>Tennis</nb-option>
<nb-option value='Badminton'>Badminton</nb-option>
<nb-option value='Squash'>Squash</nb-option>
<nb-option value='Paddle'>Paddle</nb-option>
</nb-select>
<nb-select style="float:right" [(selected)]="''+pricerule.duration" placeholder='Duration' status='info'>
<nb-option value="45">45</nb-option>
<nb-option value="60">60</nb-option>
<nb-option value='90'>90</nb-option>
</nb-select><br><br><br>
<input type="text" nbInput status="info" shape="rectangle" placeholder="Price"/>
<p style="float: right">{{ pricerule.currency}}</p><br><br>
<div *ngFor="let day of pricerule.weekdays" >
<nb-checkbox style="display: inline-block" status="success" value="true">
{{weekdays[day]}}
</nb-checkbox><br>
</div><br>
<nb-card-footer>
<button nbButton hero status="danger" (click)="delPriceRule()">DELETE</button>
<button nbButton hero status="success" style="float:right">UPDATE</button>
</nb-card-footer>
</nb-card-body>
</nb-card>
</div>