Angular FormControls всегда действителен, когда более одного в форме

У меня есть два входа, которые используют FormControl, которые всегда отображаются как действительные, но если я уберу один, остальные будут действительными/недействительными, как и ожидалось. Я бы заменил два элемента управления формой на один ControlGroup, но 1.) Я хочу понять, что я делаю неправильно, и 2.) Мне нужно получить доступ к одному элементу управления формой для автозаполнения, которое у меня есть в компоненте.

Соответствующий HTML:

<form 
    fxLayout="column" 
    fxLayoutAlign="center center" 
    (ngSubmit)="onSubmit(status, count)" 
    #statusForm="ngForm"
>

    <!-- Status Input -->
    <div>
        <mat-form-field>
        <input 
            matInput placeholder="Status" 
            [formControl]="statusFormControl"
            [errorStateMatcher]="matcher"
            [matAutocomplete]="auto"
            [(ngModel)]="status"
            name="status"
            required
        >
        <mat-error *ngIf="statusFormControl.hasError('required')">
            Status is <strong>required</strong>
        </mat-error>
    </mat-form-field>

    <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let status of filteredStatusList | async" [value]="status.name">
        {{ status.name }}
        </mat-option>
    </mat-autocomplete>
    </div>


    <!-- Count Input -->
    <mat-form-field>
        <input 
            matInput placeholder="Count" 
            [formControl]="countFormControl"
            type="number"
            min="1"
            [(ngModel)]="count"
            name="count"
            required
        >
        <mat-error *ngIf="countFormControl.hasError('required')">
            Count must be a <strong>number</strong>
        </mat-error>
    </mat-form-field>

    {{statusForm.valid}}
    {{statusForm.invalid}}

    <button 
        mat-raised-button color="primary" 
        *ngIf="statusForm.valid" 
        type="submit" 
        [disabled]="statusForm.invalid"
    >
        Add
    </button>

и ТС:

export class ... {

statusFormControl = new FormControl('', [
    Validators.required
]);

countFormControl = new FormControl('', [
    Validators.required
]);

...

constructor() {
this.filteredStatusList = this.statusFormControl.valueChanges
  .pipe(
    startWith(''),
    map(status => status ? this.filterStatusList(status) : this.allStatuses.slice())
  );

}

filterStatusList(statusName: string) {
return this.allStatuses.filter(status =>
  status.name.toLowerCase().indexOf(statusName.toLowerCase()) === 0);
}

}

angular angular-forms angular-validation
person av0000    schedule 31.01.2018    source источник
comment
Я не знаю, является ли это причиной вашей проблемы ... но настоятельно рекомендуется использовать шаблонные формы ИЛИ реактивные формы ... не то и другое одновременно. В настоящее время вы используете оба. У вас есть new FormControl в коде в дополнение к ngModel в шаблоне. Рассмотрите возможность удаления ngModel и просто используйте реактивные формы.   -  person DeborahK    schedule 01.02.2018

Ответы (1)


arrow_upward
1
arrow_downward

Вот как выглядит один из моих с использованием реактивных форм (см. ниже). Обратите внимание на директиву формы formGroup. И я использовал директиву formControlName вместо директивы formControl... но любой из них будет работать.

HTML

    <form class="form-horizontal"
          novalidate
          (ngSubmit)="save()"
          [formGroup]="customerForm">
        <fieldset>
            <div class="form-group">
                <label class="col-md-2 control-label" 
                       for="firstNameId">First Name</label>

                <div class="col-md-8">
                    <input class="form-control" 
                           id="firstNameId" 
                           type="text" 
                           placeholder="First Name (required)" 
                           formControlName="firstName" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label" 
                    for="lastNameId">Last Name</label>

                <div class="col-md-8">
                    <input class="form-control" 
                           id="lastNameId" 
                           type="text" 
                           placeholder="Last Name (required)" 
                           formControlName="lastName" />
                </div>
            </div>
        </fieldset>
    </form>

Класс компонента

customerForm: FormGroup;

constructor(private fb: FormBuilder) { }

ngOnInit(): void {
    this.customerForm = this.fb.group({
        firstName: ['', [Validators.required, Validators.minLength(3)]],
        lastName: ['', [Validators.required, Validators.maxLength(50)]]
    });

}

Кроме того, если вам нужно сослаться на один из FormControls, используя приведенный выше синтаксис, вы можете сделать это следующим образом:

this.customerForm.get('lastName')

Тогда ваш метод будет выглядеть примерно так:

this.filteredStatusList = this.myForm.get('status').valueChanges
  .pipe(
    startWith(''),
    map(status => status ? this.filterStatusList(status) : this.allStatuses.slice())
  );
person DeborahK    schedule 01.02.2018