Textbox input not working in Reactive Form-CodePudding

I am using an Angular Reactive Form with the following controls:

 this.taskForm = this.formBuilder.group({
      storyNumber: new FormControl('', [Validators.required, Validators.pattern('^[A-Z]{2,}[0-9]*-[0-9]{2,}$')]),
      category: new FormControl({value:'', disabled: true}, Validators.required),
      taskName: new FormControl({value:'', disabled: true}, Validators.required),
      effortLevel: new FormControl({value:'', disabled: true}, Validators.required),
      complexityLevel: new FormControl({value:'', disabled: true}, Validators.required),
      note: new FormControl({value:'', disabled: true})
    })

The idea is that only the story number control is enabled at the start; however, once a user enters a valid story number then the other form controls become enabled. My problem is that, upon starting up the application, all of the form controls are disabled minus that of the story number, except that I cannot type in anything into the story number input, even though it is marked as enabled.

The code for the control is as follows:

 <input id="storynumber"
             
             type="text"
             (keyup)="updateFormStoryNumber();"
             (ngModelChange)="updateFormStoryNumber()"
             formControlName="storyNumber">

Any ideas?

CodePudding user response：

taskForm = this.formBuilder.group({
      storyNumber: ['', [Validators.required, Validators.pattern('^[A-Z]{2,}[0-9]*-[0-9]{2,}$')]],
      category: [{value:'', disabled: true}, Validators.required],
      taskName: [{value:'', disabled: true}, Validators.required],
      effortLevel: [{value:'', disabled: true}, Validators.required],
      complexityLevel: [{value:'', disabled: true}, Validators.required],
      note: [{value:'', disabled: true}]
 })

constructor(){
      this.taskForm.get('storyNumber')?.valueChanges.subscribe((data)=>{
      // Your logic here
      this.enableField('category') 
      // Enable or
      this.disableField('category')
 })

  enableField(fieldName:string){
    this.taskForm.get(fieldName)?.enable()
  }

  disableField(fieldName:string){
    this.taskForm.get(fieldName)?.disable()
  }

CodePudding user response：

When we mannage a input with formControlName or formControl we should NOT use (ngModelChange) or (keyup), if you want to execute some action when change you can use (input) or (change)

About disabled a FormControl it's well-know that a FormControl can be enabled/disabled using a directive, see, e.g. this SO (*)

Now you can use simply

<form [formGroup]="taskForm">

    <!--your input storyNumber-->
    <input id="storynumber"
             
             formControlName="storyNumber">

    <!--all the rest of your input using the directive-->
    <input id="category"
             
             [disableControl]="taskForm.get('storyNumber').errors"
             formControlName="category">
    <input id="taskName"
             
             [disableControl]="taskForm.get('storyNumber').errors"
             formControlName="taskName">
    ...
</form>

See that you neen't "extra code" in your .ts

(*)another way is use [attrb.disabled]="condition", but in this case you are not disabling the FormControl, only the HTML input

NOTE: in the directive change the "condition:boolean" by condition:boolean|null (and don't forget include the directive in imports of your module

import { NgControl } from '@angular/forms';
@Directive({
  selector: '[disableControl]'
})
export class DisableControlDirective {
  @Input() set disableControl( condition : boolean| null ) {
    if (condition)
        this.ngControl.disable();
    else
        this.ngControl.enable();
  }

  constructor( private ngControl : NgControl ) {
  }
}