Ngmodel表单验证

Question

我有一个角度ngModel表单，我想做一些东西，当第一个输入被填充时，第二个输入从enable更改为disable，当第二个输入被填充时，第三个也更改为enable。

这是我的forms screenshot的屏幕

所以我试过了，但它不起作用：

 <div class="pl-2">
    <div class="form-group">
       <label for="exampleInputEmail1">Nom:</label>
       <input
          [(ngModel)]="nom"
          type="text"
          class="form-control"
          id="exampleInputEmail1"
          aria-describedby="emailHelp"
          placeholder="Nom"
        />
     </div>
    
     <div class="form-group">
        <label for="exampleInputEmail1">Prenom:</label>
        <input
           type="text"
           [(ngModel)]="prenom"
           class="form-control"
           id="exampleInputEmail1"
           aria-describedby="emailHelp"
           placeholder="Prenom"
           [disabled]="disabled"
         />
      </div>

nom = ""
prenom = ""
disabled: boolean = true;
    
 ngOnInit(): void {  
    this.disabled = true;
    
    if(this.nom.length !== 0)
    {
       this.disabled=false
    }
 }

我怎么才能修复它？

Answer 1

根据您的ts代码，disabled在开头的值为true，而您的第二个输入已经被禁用。

我建议添加一个input事件来启用/禁用您的第二个输入，获取nom的值，如下所示：

    <input
       [(ngModel)]="nom"
       type="text"
       class="form-control"
       id="exampleInputEmail1"
       aria-describedby="emailHelp"
       placeholder="Nom"
       (input)="onInputEvent()"
    />

    <!-- your second input -->
     <input
         type="text"
         [(ngModel)]="prenom"
         class="form-control"
         id="exampleInputEmail1"
         aria-describedby="emailHelp"
         placeholder="Prenom"
         [disabled]="disabled"
      />

在.ts文件中：

....
disabled = false;

onInputEvent(): void {
  this.disabled = this.nom.length > 0; // disables your second input
}