How to Disable an Input Dynamically With Angular 7

Disable Angular 5 Input fields correct way

You can change the assignment of the variable to a setter method so that you'd have:

set isDisabled(value: boolean) {
 this._isDisabled = value;
 if(value) {
  this.form.controls['name'].disable();
 } else {
    this.form.controls['name'].enable();
  }
}

Angular 7: Disable and Enable particular form field in angular 7 reactive form

All you could do instead of passing control name in onEdit('firstname') method you can pass control itself and check if its disabled then enable it and vice versa.

in template

(click)="onEdit(profileForm.get('firstname'))" <== pass control itself

in component

onEdit(control: AbstractControl) {
  control.status === 'DISABLED' ? control.enable() : control.disable();
}

How to disable a input in angular2

Try using attr.disabled, instead of disabled

<input [attr.disabled]="disabled ? '' : null"/>

Angular - How to disable an input field if an option on a select field is selected?

I solved the situation like this on the html side:

<div class="form-floating mb-7" style="display: flex;">
    <select class="form-select" id="floatingSelect" aria-label="Floating label select example" #type (change)="observeSelect()" >
      <option value="1" >Market</option>
      <option value="2" >Category</option>
    </select>
    <label for="floatingSelect">Type</label>
</div>

<div class="form-floating mb-7" style="display: flex;">
    <input type="text" class="form-control" id="floatingInputValue" [value]="type.value == '2' ? item.externalplatform_category : null" #externalCat [disabled]="type.value == '1' ? true : false"/>
    <label for="floatingInputValue">Category</label>
</div>

And in the component I created the function:

observeSelect():void {}

Simplest solution I could come with. Do I know exactly why it works? No. Does it work? Yes.

Thank you all for your help!

angular 7 reactive forms: dynamically add / remove input fields for each input field in the form

I think what will work best for your situation is to use FormArray. With FormArray you can push and remove items just like you would do with a normal array

  myForm = this.fb.group({
    documents: this.fb.array([])
  });

  get documentsControl(): FormArray {
    return this.myForm.get("documents") as FormArray;
  }
  documents = [
    { id: 1, service_item_id: 311101, name: "document 1" },
    { id: 2, service_item_id: 311102, name: "document 2" },
    { id: 3, service_item_id: 311103, name: "document 3" },
    { id: 4, service_item_id: 311104, name: "document 4" }
  ];
  ngOnInit() {
    this.documents.forEach(document =>
      this.documentsControl.push(
        this.fb.group({
          id: [document.id],
          name: [document.name],
          service_item_id: [document.service_item_id]
        })
      )
    );
  }
  constructor(private fb: FormBuilder) {}
  submitForm() {}
  add() {
    this.documentsControl.push(
      this.fb.group({
        id: [null],
        name: [null],
        service_item_id: [null]
      })
    );
  }
  remove(index) {
    this.documentsControl.removeAt(index);
  }

to add items we use push while to remove items we use removeAt

Below is the html

<form [formGroup]="myForm" (ngSubmit)="submitForm()">
    <ng-container formArrayName='documents'>
      <div *ngFor="let c of documentsControl.controls; let index = index" [formGroupName]='index'>
        <label>
            {{ c.value.name}}
        </label>
        <input type="number" formControlName="service_item_id" placeholder="name" />
        <button class="btn btn-primary btn-sm" (click)="add()">Add</button>
        <button class="btn btn-primary btn-sm" (click)="remove(index)">Remove</button>
    </div>
    </ng-container>
    <button type="submit" class="btn btn-primary btn-small">Submit</button>
</form>

Edit

To add items below there clicked button we can implement insert()

  insert(index) {
    const serviceItenId = this.documentsControl.controls[index].get('service_item_id').value
    this.documentsControl.insert(
      index + 1,
      this.fb.group({
        id: [null],
        name: [null],
        service_item_id: [serviceItenId]
      })
    );
  }

I have updated the below Demo to reflect this

See Demo

Disable Input fields in reactive form

name: [{value: '', disabled: true}, Validators.required],
name: [{value: '', disabled: this.isDisabled}, Validators.required],

or

this.form.controls['name'].disable();

Angular: How can I dynamically change the disabled or visible property of an input type=radio list?

Not exactly sure what the issue is... You may wish to restart your code. I ran this stackblitz using your code, and both [disabled]="paymentInstructionType.defaultRegShow === true" and [disabled]="paymentInstructionType.defaultRegShow" work just fine.

Disable input based on dynamic model field

As it was mentioned in the comments, there is no [disabled] in angularjs (the square brackets in the template are a binding for the new angular), so the way to dynamically change your disabled state is by using the ng-disabled directive as follows:

<div class="item-inner" ng-if="f.fieldType == 'text'">
   <div class="item-title item-label">{{f.displayName}}</div>
   <div class="item-input-wrap">
      <input type="text" placeholder="" name="{{f.internalName}}"
           ng-model="formData[f.internalName]"
           ng-disabled="formData[f.internalName].length >1"/>
      <span class="input-clear-button"></span>
   </div>
</div>

Angular 6 can't disable enable input with local reference

Disabled cannot be Set Dynamically like your approach for more info
https://github.com/angular/angular/issues/11271 . But you can enable or disable via function in onchange like control.enable() , control.disable()

---

Related Topics