在 Angular 中具有禁用属性的 Ngmodel 指令

Question

我想在 ngoninit 调用后不为空时禁用输入。我的意思是我从 web 服务预加载数据。

我只想禁用起初为空的输入。

之后，如果用户在空输入 ngmodel 上输入了一些东西，那么禁用变成真的我不想那样做。

例如，假设 User.adi 为空

[(ngModel)]="User.adi"

然后检查[disabled]="User.adi != null "如果我输入 1 个单词，则变为 true。

我只是想在从 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

我认为您需要扩展您的 model 并使用一些明确说明您希望何时禁用输入的属性。 例如，您可以为您的所有属性值创建一个通用的 class，该值既包含值又包含是否禁用输入。 像这样的东西；

class PreloadedValue<T>   {
    public value: T;
    public shouldBeDisabled: boolean;
}

然后你可以像这样绑定；

[(ngModel)]="User.adi.value" [disabled]="User.adi.shouldBeDisabled"

为 User 提供一个强类型也是一个好主意；

class User {
   public adi: PreloadedValue<string>;
}

..或者更简单，如果你想打破它；

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

此外，由于您的组件中只有一个User ，您可以将属性设置为组件中的一个字段；

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

这里有许多设计选项。 您将需要选择最适合您需求的一种。 关键是，您可能最擅长明确说明您期望发生的事情的属性。 另一种选择是使用具有属性的FormControl来跟踪控件是否是原始的、脏的、触摸的等。

希望这对你有帮助，祝你好运。