Ngmodel 表单验证

Question

I have an Angular ngModel Forms , I wanna make something that when the first input is filled, the second change from enable to disable, and when the second is filled, the third also change to enable.

This a screen of my forms screenshot

So I have tried with this but it doesn't work:

 <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
    }
 }

How can I fix it?

Answer 1

According to your ts code, disabled has a value of true at the beginning, which your second input is already disabled.

I would suggest adding an input event for enabling/disabling your second input capturing the value of nom like this:

    <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"
      />

In your .ts file:

....
disabled = false;

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