Проверка угловых реактивных форм

Question

У меня есть форма с 3 входами, 2 из которых требуются, а третий нет.

Моя проблема в том, что, когда я перехожу на страницу формы, я вижу, что поле, которое не является обязательным, находится в допустимом состоянии и уже закрашено зеленым, даже если поле не загрязнено или не затронуто.

Могу ли я что-нибудь сделать, чтобы ввод был серым, пока я не проверил поле / форму, или это так задумано?

Вот код, который я использую в компоненте:

export class SystemSettingsComponent implements OnInit {
form: FormGroup;

constructor(private formBuilder: FormBuilder) {
    this.form = new FormGroup({});
}

ngOnInit() {
    this.form = this.formBuilder.group({
        serviceName: ['', Validators.required],
        serviceDesc: [''],
        serviceId: [{value: SystemSettingsComponent.generateId(), disabled: true}, Validators.required]
    });
}

static generateId() {
    return Math.random().toString(36).substr(2, 9);
}}

И шаблон:

<form [formGroup]="form" novalidate>
<div class="row">
    <div class="col-lg-4">
        <mat-form-field>
            <input matInput placeholder="שם השירות" formControlName="serviceName"/>
        </mat-form-field>
        <mat-form-field>
            <textarea matInput placeholder="תיאור השירות" formControlName="serviceDesc"></textarea>
        </mat-form-field>
        <mat-form-field>
            <input matInput class="ltr text-align-left" placeholder="מזהה שירות" formControlName="serviceId"/>
        </mat-form-field>
    </div>
</div>
<div>
    <button mat-raised-button class="mat-raised-button mat-primary" matStepperNext>הבא</button>
</div>

Answer 1

Вы можете прослушать изменения статуса формы и соответственно установить отключенное состояние необязательного элемента управления формы. Что-то вроде:

ngOnInit() {
    this.form = this.formBuilder.group({
        serviceName: ['', Validators.required],
        serviceDesc: [{value: '', disabled: true}],
        serviceId: [{value: SystemSettingsComponent.generateId(), disabled: true}, Validators.required]
    });

    this.form.statusChanges.subscribe(status => {
        if (status === 'VALID' && this.form.controls.serviceDesc.disabled) {
            this.form.controls.serviceDesc.enable();
        } else if (status !== 'VALID' && this.form.controls.serviceDesc.enabled) {
            this.form.controls.serviceDesc.disable();
        }
    });
}