Директива Ngmodel со свойством disable в Angular

Question

Я хочу отключить входы, когда они не пусты после вызова ngoninit. Я имею в виду, что я предварительно загружаю данные из веб-службы.

Я просто хочу отключить входы, которые сначала пусты.

После этого если пользователь вводит что-то на пустых входах, ngmodel работает, а затем отключено становится истинным, я не хочу этого делать. если я ввожу хотя бы 1 слово.

Я просто хочу сначала проверить, что это отключено после предварительной загрузки данных из ngoninitcall. Входы не должны отключаться после того, как пользователь ввел в него какой-то ввод. Надеюсь, вы это понимаете. Заранее спасибо

Мой html:

<p-fieldset class="profilFieldSet" [legend]="'profilim' | translate " [toggleable]="true ">
    <div class="p-grid p-dir-col" style="margin: 10px 0px;">
        <div class="p-col">
            <div class="p-grid">
                <div class="p-col">
                    {{'adiniz' | translate}} *:
                </div>
                <div class="p-col">
                    <input pInputText type="text" [placeholder]="'gerekli' | translate" [(ngModel)]="User.adi" [disabled]="User.adi != null " />
                </div>
            </div>
        </div>
        <div class="p-col">
            <div class="p-grid">
                <div class="p-col">
                    {{'soyadiniz' | translate}} *:
                </div>
                <div class="p-col">
                    <input pInputText type="text" [placeholder]="'gerekli' | translate" [(ngModel)]="User.soyadi" [disabled]="User.soyadi != null " />
                </div>
            </div>
        </div>
        <div class="p-col">
            <div class="p-grid">
                <div class="p-col">
                    {{'yasiniz' | translate}} *:
                </div>
                <div class="p-col">
                    <input pInputText type="text" [placeholder]="'gerekli' | translate" [(ngModel)]="User.yasi" [disabled]="User.yasi != null " />
                </div>
            </div>
        </div>
        <div class="p-col">
            <div class="p-grid">
                <div class="p-col">
                    {{'maasiniz' | translate}} *:
                </div>
                <div class="p-col">
                    <input pInputText type="text" [placeholder]="'gerekli' | translate" [(ngModel)]="User.maasi" [disabled]="User.maasi != null " />
                </div>
            </div>
        </div>
        <div class="p-col">
            <div class="p-grid">
                <div class="p-col">
                    {{'telefonnumaraniz' | translate}} :
                </div>
                <div class="p-col">
                    <input pInputText type="text" [placeholder]="'gerekli' | translate" [(ngModel)]="User.telefon_no" [disabled]="User.telefon_no != null" />
                </div>
            </div>
        </div>
        <div class="p-col">
            <div class="p-grid">
                <div class="p-col">
                    {{'evadresiniz' | translate}} :
                </div>
                <div class="p-col">
                    <input pInputText type="text" [placeholder]="'gerekli' | translate" [(ngModel)]="User.ev_adresi" [disabled]="User.ev_adresi != null " />
                </div>
            </div>
        </div>
        <div class="p-col">
            <div class="p-grid">
                <div class="p-col">
                    {{'isebaslamatarihiniz' | translate}} *:
                </div>
                <div class="p-col">
                    <input pInputText type="text" [placeholder]="'gerekli' | translate" [(ngModel)]="User.ise_baslama_zamani" [disabled]="User.ise_baslama_zamani != null />
                </div>
            </div>
        </div>
        <div class=" p-col ">
            <div class="p-grid ">
                <div class="p-col ">
                    {{'istenayrilistarihiniz' | translate}} :
                </div>
                <div class="p-col ">
                    <input pInputText type="text " [(ngModel)]="User.isten_ayrilis_zamani " disabled="true " />
                </div>
            </div>
        </div>
        <div class="ui-grid-row " style=" position: relative; ">
            <p-button [label]=" 'guncelle' | translate " (click)="updateProfile() "></p-button>
        </div>
    </div>
</p-fieldset>
<p-toast></p-toast>

Мой ts:

import { Component, OnInit, OnChanges } from '@angular/core';
import { HttpcagrilariService } from 'src/app/servisler/httpcagrilari.service';
import { MessageService } from 'primeng/api';
import { TranslatePipe } from 'src/app/pipelar/translate.pipe';

@Component({
  selector: 'app-profil',
  templateUrl: './profil.component.html',
  styleUrls: ['./profil.component.css'],
  providers: [MessageService, TranslatePipe]
})
export class ProfilComponent implements OnInit, OnChanges {

  User: any = {};

  constructor(private httpCagriServis: HttpcagrilariService, private messageServis: MessageService
    , private translatePipe: TranslatePipe) { }

  ngOnInit(): void {
    this.httpCagriServis.getProfile().subscribe(
      (response) => {
        this.User = response;
      },
      (error) => {
        console.log(error);
      }
    );
  }

  updateProfile() {
    console.log(this.User);
  }

}

Answer 1

Я думаю, вам нужно расширить вашу модель некоторым свойством, которое четко указывает, когда вы ожидаете, что ввод будет отключен. Например, вы можете создать общий c класс для всех значений ваших свойств, который содержит как значение, так и то, следует ли отключать ввод. Примерно так * .. или проще, если вы хотите его разбить;

class User {
   public adi: string;
   public adiShouldBeDisabled: boolean;
}

Кроме того, поскольку в вашем компоненте только один User, вы можете просто установить свойство как поле в компоненте;

export class ProfilComponent implements OnInit, OnChanges {
   public User: any = {};
   public adiShouldBeDisabled: boolean;

Здесь есть несколько вариантов оформления. Вам нужно будет выбрать тот, который лучше всего соответствует вашим потребностям. Дело в том, что вам, вероятно, лучше всего подходит свойство, в котором четко указано, чего вы ожидаете. Другой вариант - использовать FormControl , который имеет свойства для отслеживания того, является ли элемент управления нетронутым, грязным, затронутым и т. Д. c.

Надеюсь, это поможет вам, удачи .