Кнопка отключения не работает для проверки angular4

Question

В моей форме есть кнопка отправки, я пытаюсь отключить ее, пока все текстовые поля не будут заполнены.Он не работает после того, как страница обновлена ​​или впервые загружена в браузер.Если я выполняю какие-либо другие операции на той же странице, а затем открываю это всплывающее окно добавления подробностей, оно отключается.Помощь будет высоко ценится.

компонент

form: FormGroup;
 constructor(private fb: FormBuilder) {
    this.createForm();
}
createForm() {
    this.form = this.fb.group({
        name: ['', Validators.required],
        addrs: ['', Validators.required],
    });
}

HTML-файл

<div id="details">
    <form [formGroup]="form" (ngSubmit)="addDetails()" name="form" novalidate>
        <div class="form-group">
            <label for="name">Name</label><input type="text"
                class="form-control" id="name" placeholder="Please Enter Name"
                formControlName="name" >
        </div>
        <div class="form-group">
            <label for="addrs">Address</label><input type="text"
                class="form-control" id="addrs"
                placeholder="Please Enter Address" formControlName="addrs" >

        <button type="submit" [disabled]="form.invalid || loading"
            class="btn btn-success">Submit</button>
        <br>
        <div *ngIf="loading" class="alert alert-success box-msg" role="alert">
            <strong>Added Successfully</strong>
        </div>
    </form>
</div>

Answer 1

Почему вы используете no validate в теге формы?если в форме нет упоминания validate, то форма не будет подтверждена. Она просто выполнит accept, что вы вводите внутри form.try, и выполнит без novalidate ang ngmodel во входном tag.it будет работать

Answer 2

Попробуйте:

<button type="submit" [disabled]="form.status === 'INVALID' || loading"
        class="btn btn-success">Submit</button>

Это должно учитывать оба варианта, загрузку и недопустимую форму.