Textbox input not working in Reactive Form

Issue

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"
             class="form-control"
             type="text"
             (keyup)="updateFormStoryNumber();"
             (ngModelChange)="updateFormStoryNumber()"
             formControlName="storyNumber">

Any ideas?

Solution

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

Answered By - Subham Bhattacharya