如何将表单外的按钮标记与模板驱动的表单中的form.invalid函数一起使用

Question

<form  #documentEditForm="ngForm" id="ngForm" (ngSubmit)="onDocSubmit()" >
<div class="form-group">
<label for="DOC_NAME">DOC_NAME</label>
<input
type="text"
pInputText
id="DOC_NAME"
required
minlength="4"
maxlength="240"
[(ngModel)]="bomhdr_doc_value.DOC_NAME"
#DOC_NAME="ngModel"
name="DOC_NAME"
class="form-control"
autofocus
readonly
/>
</div>
<form/>
<button class="btn-save button primary" form="ngForm 
[disabled]="!documentEditForm.form.valid">SAVE</button>

这没有奏效。我得到：

错误：类型"BomHeaderTabViewComponent"上不存在属性"documentEditForm">

Answer 1

试试这个：Html:

<form [formGroup]="myF" id="ngForm" novalidate>
<mat-form-field>
<input matInput required formControlName="name" minlength="4" maxlength="240">
</mat-form-field>
</form>            
<button class="btn-save button primary" [disabled]="!myF.valid">SAVE</button>

在TS中：

myF = new FormGroup({
name: new FormControl('', Validators.required)
})

另一种选择：

<form id="ngForm">
<mat-form-field>
<input [formControl]="myF" matInput required minlength="4"  maxlength="240">
</mat-form-field>
</form>
<button class="btn-save button primary" [disabled]="!myF.valid">SAVE</button>

TS:

myF = new FormControl('', Validators.required);

最后使用ngmodel：

<form id="ngForm">
<mat-form-field>
<input #inp ([ngModel])="myF" matInput required minlength="4" maxlength="240">
</mat-form-field>
</form>
<button class="btn-save button primary" [disabled]="myF.length <= 4">SAVE</button>
{{inp.value}}

和TS:

myF = '';