Как отключить поле mat-form в angular на основе значения?

Question

Как мы можем отключить поле матрицы, поле ввода в angular? , Я хочу отключить поле на основе значения test.status, если статус равен 1, то эта форма отключена. Спасибо,

<div fxLayout="row" fxLayoutGap="24px">
    <div fxFlex fxLayout="row">
      <mat-form-field appearance="outline" class="pr-4" fxFlexs>
        <mat-label>Description</mat-label>
        <input formControlName="description" matInput>
        <mat-error *ngIf="form.controls.description.hasError('maxlength')">
          Descriptions can't be more than 100 characters!
        </mat-error>
      </mat-form-field>
    </div>
</div>

группа строителей форм

this.form = this.formBuilder.group({ ...
    status: [
        {
          value: test.status 
          disabled: true,
        }
    ],
    description: [
        test.description || null, [
          Validators.maxLength(100),
        ]
    ],

Answer 1

Пожалуйста, добавьте / используйте указанную ниже часть в поле ввода html:

[disabled] = "form.controls.status [0] .value == 1" (или) [attr. disabled] = "form.controls.status [0] .value == 1? '': null" (или) [class.disable] = "form.controls.status [0] .value == 1"

Надеюсь, это поможет.

Answer 2

Атрибут

disabled не будет работать в реактивной форме. Необходимо установить условие, как показано ниже:

 this.formName = this.formBuilder.group({
  fieldName: [{value: 'someValue', disabled:(condition)}]
})

, например:

 this.form = this._fb.group({
       description : [{value: 'someValue', disabled:(this.status>0)},[Validators.required]]
     })

Когда поле формы отключено, оно не включается в отправленные значения, т.е. объект формы.

Вы можете получить значения, как показано ниже:

this.formName.getRawValue();

Демо