Angular 角度形式验证仅在输入然后删除时有效

Angular 角度形式验证仅在输入然后删除时有效,angular,typescript,forms,validation,controls,Angular,Typescript,Forms,Validation,Controls,当没有输入时,我希望表单的提交按钮为空。但我的问题是提交时只空格,当你输入时,会删除它 <form [formGroup]="resourceForm" (ngSubmit)="createResource(title.value, link.value, description.value)"> <div class="form-group">

当没有输入时,我希望表单的提交按钮为空。但我的问题是提交时只空格,当你输入时,会删除它

<form [formGroup]="resourceForm" (ngSubmit)="createResource(title.value, link.value, description.value)">
          
          <div class="form-group">
            <div class="modal-body">
              <label for="title">Titel</label>
              <div class="input-group">
                <input #title formControlName="title" type="text" class="form-control" id="title"
                  placeholder="Titel"
                  [class.is-invalid]="resourceForm.get('title').invalid && resourceForm.get('title').touched">
                <div class="invalid-feedback">
                  Titel darf nicht leer sein
                </div>
              </div>

              <label for="link">Link (Optional)</label>
              <input #link type="text" formControlName="link" class="form-control" id="link" placeholder="Link">

              <label for="description">Beschreibung</label>
              <div class="input-group">
                <textarea #description formControlName="description" type="text" class="form-control"
                  id="description"
                  [class.is-invalid]="resourceForm.get('description').invalid && resourceForm.get('description').touched"
                  placeholder="Beschreibung"></textarea>
                <div class="invalid-feedback">
                  Beschreibung darf nicht leer sein
                </div>
              </div>

            </div>
            <div class="modal-footer">
              <button class="btn btn-primary" data-dismiss="modal" type="submit"
                
                [disabled]="!resourceForm.valid">Hinzufügen</button>
            </div>
          </div>
        </form>

滴度
我不知道该怎么办
链接(可选)
贝施雷邦
这是我的梦想
欣祖夫根

我不完全建议这样做,但这应该可以满足您的需要:

而不是
[disabled]=“!resourceForm.valid”
执行以下操作:

[disabled]="!resourceForm.touched || !resourceForm.valid"

出现此问题的原因是,表单在被触摸之前应该是有效的。

因此,我出现此问题的原因是,我的Formbuilder的typescript代码设置错误

我所拥有的:

public resourceForm = this.formBuilder.group({
    title : [['', Validators.required]],
    link  : [['', ]],
    description : [['', Validators.required]],

});
什么是对的:

public resourceForm = this.formBuilder.group({
    title : ['', [Validators.required]],
    link  : ['', []],
    description : ['', [Validators.required]],

});

你能展示你的组件代码吗?我不推荐它的原因是因为它可能不会产生最好的用户体验。