Question

我希望表单填写完毕后禁用注册按钮。

<form [formGroup]="service.formModelInstrumexts" autocomplete="off" (submit)="onSubmit()"
  style="background-color: #0067b8 !important; margin-top: 25px; margin-left: 600px; margin-right: 600px;">
  <div style="padding: 15px">

<div>
  <h3 style="color: azure">
    اضافه کردن ساز
  </h3>
</div>
    <select   id="ddl" style="width:200px; margin-right: 1%; margin-bottom: 10px; border-radius: 0px;" dir="rtl"
      class="custom-select custom-select-sm">
      <option> لطفا نوع ساز را انتخاب نمایید</option>
      <option *ngFor="let item of type; let i = index" style="color: black;" (click)="test(item.id)" >{{item.name}}
      </option>
    </select>

    <div class="form-group">
      <label>نام</label>
      <input style="width: 40%; margin-left: 60%; border-radius: 0px;" class="form-control" formControlName="Name">
    </div>

    <div class="form-group">
      <label>توضیحات</label>
      <textarea [(ngModel)]="name"  style="direction: rtl; color: rgb(3, 0, 0); border-radius: 0px;" class="form-control" formControlName="Comment"
        aria-label="With textarea"></textarea>
    </div>


    <div  *ngIf="name != null" >
      <app-upload style=" width: 100px; "
        (onUploadFinished)="uploadFinished($event)"></app-upload>
      <img src="http://localhost:54277/{{this.response.dbPath}}" *ngIf="this.response.dbPath != null" width="200px"
        height="200px">
    </div>

    <div class="form-row">
      <div class="form-group col-md-8 offset-md-2">
        <button style="width: 100px; color: #0067b8; background-color: #fff; border-color: transparent; border-radius: 0px;margin-left: 8px;" type="submit" class="btn btn-lg btn-block"
          [disabled]="!service.formModelInstrumexts.valid" >ثبت
        </button>
      </div>
    </div>
  </div>
</form>

Answer 1

您的提交按钮将取决于表单的有效性。

[disabled]= "!service.formModelInstrumexts.valid"

另一种方法是模板引用变量

<form #myForm [formGroup]="service.formModelInstrumexts"  (submit)="onSubmit()">

然后

[disabled]= "!myForm.valid"

Answer 2

一件事值得一提的是当你想禁用例如。用指令formControl或formControlName输入，然后Angular然后在控制台中以警告的形式通知您：

  It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true
  when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
  you. We recommend using this approach to avoid 'changed after checked' errors.

  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });

另一种方法是在ts代码中禁用/启用某些按钮或控件：

form: FormGroup;

this.form = new FormGroup({
  someControl: new FormControl('', Validators.required)
});

this.form.statusChanges.subscribe(status => {
  if (status === 'VALID') {
    this.form.controls.someControl.disable({emitEvent: false}); // Prevent circular status change notification
  } else {
    this.form.controls.someControl.enable({emitEvent: false}); // Prevent circular status change notification
  }
});

setTimeout(() => this.form.controls.someControl.setValue('123'), 1000);
setTimeout(() => this.form.controls.someControl.setValue(''), 2000);

如何禁用表单中的按钮？

2 个答案: