Форма Angular 7 и Bootstrap проверяет форму, если она отмечена, но не отменяет действие, если не отмечена - PullRequest
Новая
       15

Форма Angular 7 и Bootstrap проверяет форму, если она отмечена, но не отменяет действие, если не отмечена

0 голосов
/ 03 октября 2019

У меня есть форма регистрации с флажком для буквы T of S. Кнопка «Регистрация» (форма) становится активной, когда форма действительна, и отключается, когда она недействительна. Я могу заполнить форму и установить флажок, и кнопка регистрации станет активной / кликабельной. Таким образом, форма действительна, но когда я снимаю флажок, кнопка регистрации остается активной / кликабельной, и форма остается в силе. Это не становится недействительным!

К вашему сведению - я добавил пару операторов во входные данные 'name' и '[checked]', чтобы посмотреть, получится ли это, но не повезло.

Вот моя форма и часть кода .ts. Некоторый код оставлен для его краткости. 

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit, AfterViewInit {
  // some variables here removed
  registerForm: FormGroup;
  bsConfig: Partial<BsDatepickerConfig>;
  terms = false;
  
  

  constructor(private authService: AuthService, private router: Router,
              private alertService: AlertService, private fb: FormBuilder, private zone: NgZone) {}

  ngOnInit() {
    this.bsConfig = {
      containerClass: 'theme-red'
    };
    this.createRegisterForm();
  }
  
  createRegisterForm() {
    this.registerForm = this.fb.group({
      terms: ['', Validators.required],
    });
  }
<form [formGroup]="registerForm" (ngSubmit)="register()">
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" id="gridCheck" 
         [ngClass]="{'is-invalid': registerForm.get('terms').errors && registerForm.get('terms').touched}" 
         name="terms" 
         type="checkbox"  
         formControlName="terms">
      <label class="form-check-label" for="gridCheck">Agree to terms</label>
    </div>
  </div>

  <div class="form-group text-center">
    <button class="btn btn-yb w-100" [disabled]="!registerForm.valid" type="submit">
        <span *ngIf="loadingRegister" class="spinner-border spinner-border-sm color-yb-white" role="status" aria-hidden="true"></span>
        <span class="sr-only">Loading...</span>
        <span *ngIf="!loadingRegister">Register</span>
    </button>
  </div>
</form>

1 Ответ

1 голос
/ 03 октября 2019

Ах, раньше не видел:

Вам нужно использовать Validators.requiredTrue, чтобы флажок управления работал правильно.

...