为什么从Angular中删除ReactiveForm从Select中删除我的选项值?

时间:2019-01-26 15:19:48

标签: html angular angular-reactive-forms

我的component.html中有一个奇怪的问题,我有以下代码:

<div class="col-lg-6">
          <!-- < form item -->
          <div class='form-group'>
            <label for='uf'>UF</label>
            <select formControlName="compUf" [ngClass]="{ 'is-invalid': submitted && f.compUf.errors }" class='custom-select' id='uf'>

              <option selected>-- Selecione --</option>
              <ng-container *ngFor="let field of this.states | keyvalue">
                <option [value]="field.key" [selected]="field.key === 'AC'">{{ field.key }}</option>
              </ng-container>

            </select>
            <div *ngIf="submitted && f.compUf.errors" class="invalid-feedback error-msg-form">
              <div *ngIf="f.compUf.errors.required">Este campo é obrigatório</div>
            </div>
          </div>
          <!-- form item /> -->
        </div>

此代码可以毫无问题地填充选择,但是此行不起作用[selected] =“ field.key ==='AC'”,我认为问题出在我的代码上,但是当我删除此属性时来自ReactiveForm formControlName =“ compUf”,但我不知道为什么!

这是我创建表单时在component.ts上的代码:

this.registrationForm = this.formBuilder.group({
      compCnpj: ['', [Validators.required,GenericValidator.isValidCnpj()]],
      compFantasy: ['', [Validators.required,Validators.maxLength(200)]],
      compSocial: ['', [Validators.required,Validators.maxLength(200)]],
      compRevenue: ['', [Validators.required]],
      compRhName: ['', [Validators.required,Validators.maxLength(150)]],
      compRhCell: ['', [Validators.required]],
      compRhPhone: ['', [Validators.required]],
      compRhEmail: ['', [Validators.required,Validators.email, Validators.maxLength(100)]],
      compResCompName: ['', [Validators.required]],
      compResName: ['', [Validators.required, Validators.maxLength(150)]],
      compCorresp: [{ value: '', disabled: true }, [Validators.required]],
      compResPhone: ['', [Validators.required]],
      compAgreementDate: ['', [Validators.required]],
      compOfiNumber: ['', [Validators.required]],
      compAgrePayDate: ['', [Validators.required]],
      compCutDate: ['', [Validators.required]],
      compPayDate: ['', [Validators.required]],
      compCep: ['', [Validators.required]],
      compUf: [Validators.required],
      compCity: [Validators.required],
      compNeigh: ['', [Validators.required]],
      compAddress: ['', [Validators.required, Validators.maxLength(200)]],
      compNumber: ['', [Validators.required, Validators.maxLength(5)]],
      compComplement: ['', [Validators.required, Validators.maxLength(200)]]
    });

我当时在想,问题是formBuilder的默认值,所以我从compUf中删除了“”,但问题仍然存在。

怎么了?

0 个答案:

没有答案