The form was working fine before I updated angular.
Now the same form gives invalid.
<form (submit)="onCalculate()" [formGroup]="calculateForm">
<mat-form-field>
<input matInput name="capital" type="number" required>
<mat-error *ngIf="calculateForm.get('capital').invalid"></mat-error>
</mat-form-field>
<mat-form-field>
<input matInput name="building" type="number" formControLastName="building" required>
<mat-error *ngIf="calculateForm.get('building').invalid"></mat-error>
</mat-form-field>
<button
mat-raised-button
class="btn btn-secondary btn-md"
type="submit"> Calculate
</button>
</form>
Typescript:
this.calculateForm = new FormGroup({
'capital': new FormControl(null, {validators: [Validators.required]}),
'building': new FormControl(null,
{validators: [Validators.required, Validators.minLength(4)]
})
});
onCalculate(){
console.log(this.calculateForm.value)
console.log(this.calculateForm.controls)
}
It is giving invalid, and the values are null. Anyone knows why?
Related
I want to store login information in my local server, but don't know how. I currently have an index, login, and library page in my root folder, and want to redirect users to the library page after they confirm their emails via email.
<body>
<div class="container">
<div class="card">
<div class="inner-box" id="card">
<div class="flip-card-front">
<h2>LOGIN</h2>
<form action="/action_page.php" id="Client" name="client" method="post" netlify align="left">
<input type="email#" class="input-box" placeholder="Your Email ID" required>
<input type="password" class="input-box" placeholder="Password" required>
<button type="submit" class="submit-btn">Submit</button>
<input type="checkbox"><span>Remember Me</span>
</form>
<button type="button" class="btn" onclick="openRegister()">I'm New Here</button>
Forgot Password
</div>
<div class="flip-card-back">
<h2>REGISTER</h2>
<form action="/action_page.php" id="registrant" name="new-client" method="post" netlify align="left">
<input maxlength="40" type="text" class="input-box" placeholder="Your Full Name" required>
<input maxlength="15" type="text" class="input-box" placeholder="Your Email ID" required>
<input maxlength="30" type="password" class="input-box" placeholder="Make a Password" required>
<center><input type="radio" name="gender">Male
<input type="radio" name="gender">Female
<input type="radio" name="gender">Other<br> </center><br>
<input type="checkbox"><span>Remember Me</span><br>
<input type="checkbox"><span>Applying For Work</span><br>
<button type="submit" class="submit-btn">Submit</button>
I Have an account
Forgot Password
var card = document.getElementById("card");
function openRegister(){
card.style.transform = "rotateY(-180deg)";
}
function openLogin(){
card.style.transform = "rotateY(0deg)";
}
</script>
</body>
I am trying to find a way to activate a button when both of those checkboxes are checked. I've disabled the button but I can't think of a method of actually triggering the isActive when both of them are checked.
<div class="form-check mb-1">
<input
class="form-check-input"
type="checkbox"
id="age"
checked
/>
<label
class="form-check-label"
for="age"
>By clicking this you agree that you
are at least 18 years old.</label
>
</div>
<div class="form-check mb-4">
<input
class="form-check-input"
type="checkbox"
id="terms"
checked
/>
<label
class="form-check-label"
for="terms"
>By clicking this you agree to our
<router-link to="/terms"
>Terms & Conditions</router-link
>
</label>
</div>
<button
:disabled="isActive"
class="btn btn-outline-light btn-lg px-5 mb-1"
type="submit"
>
Register
</button>
<script>
export default {
data() {
return {
isActive: true,
};
},
};
</script>
You should do something like
First checkbox
<input class="form-check-input" v-model="checkOne" type="checkbox" id="age" checked />
second checkbox
<input class="form-check-input" v-model="checkTwo" type="checkbox" id="age" checked />
button
<button :disabled="!checkOne || !checkTwo" class="btn btn-outline-light btn-lg px-5 mb-1" type="submit" >
I have created a dynamic form using formGroup and formArray, and need to get repItems inside the repForm in HTML, but got the following error:
ERROR TypeError: Cannot read property 'get' of undefined
at Object.eval [as updateDirectives]
How to resolve it without using formBuilder?
My code:
ngOnInit() {
this.quizForm = new FormGroup({
items: new FormArray([new FormGroup({
question: new FormControl('',Validators.required),
repOne: new FormControl(''),
repForm: new FormGroup({
repItems:new FormArray([new FormGroup({
rep: new FormControl('',Validators.required)
})])
})
})])
})
}
<form [formGroup]="quizForm" #formDir="ngForm">
<div formArrayName="items" *ngFor="let item of quizForm.get('items').controls; let i = index;">
<div [formGroupName]="i">
<div class="form-group">
<label for="question">Question</label>
<input id="question" class="form-control" formControlName="question">
</div>
<div formGroupName="repForm">
<div formArrayName="repItems"
*ngFor="let repItem of repForm.get('repItems').controls; let r = repIndex;">
<div [formGroupName]="r">
<div class="form-group">
<label for="rep">Response</label>
<input id="rep" class="form-control"
formControlName="rep">
</div>
<button type="submit" class="btn btn-default"
(click)='removeRepItem(r)'>RemoveForm</button>
<button type="submit" class="btn btn-default" (click)='addRepItem()'>addForm</button>
</div>
</div>
</div>
<button type="submit" class="btn btn-default" (click)='removeItem(i)'>RemoveForm</button>
</div>
</div>
</form>
I am using the following code as a Vue component in order to register it in the root component.
const RegisterForm = {
data() {
return {
test: 'bonjour',
user: {
email: '',
firstName: 'test',
lastName: '',
password: '',
passwordConfirm: '',
terms: false,
receiveUpdates: false
}
};
},
methods: {
handleSubmit() {
const data = this.user;
if (!isFormValid()) {
return;
}
},
template: `
<div>
<form class="flex flex-col mt-2" #submit.prevent="handleSubmit()">
<label class="text-xs block mt-6 mb-3" for="firstName">
First Name
</label>
<input v-model="user.firstName" required type="text" class="text-register border-b focus:border-pink font-MuseoSans-medium outline-none pb-4 text-lg focus:outline-none w-full" name="firstName" id="firstName" value="">
<label class="text-xs block mt-6 mb-3" for="lastName">
Last Name
</label>
<input v-model="user.lastName" required type="text" class="text-register border-b focus:border-pink font-MuseoSans-medium outline-none pb-4 text-lg focus:outline-none w-full" name="lastName" id="lastName" value="">
<label class="text-xs block mt-6 mb-3" for="emailAdress">
Email Address
</label>
<input v-model="user.email"required type="text" class="text-register border-b focus:border-pink font-MuseoSans-medium outline-none pb-4 text-lg focus:outline-none w-full" name="emailAdress" id="emailAdress" value="">
<label class="text-xs block mt-6 mb-3" for="password">
Password
</label>
<input v-model="user.password" placeholder="Set password for your account" required type="password" class="text-register border-b focus:border-pink font-MuseoSans-medium outline-none pb-4 text-lg focus:outline-none w-full" name="password" id="password" value="">
<label for="confirmTerms" class="cursor-pointer select-none flex items-start mt-8 mb-3 text-xs leading-none">
<input v-model="user.terms" type="checkbox" name="confirmTerms" id="confirmTerms" checked class="mr-3 inline-block">
<span class="flex-auto leading-normal -mt-1">Check this box to agree to our <a class="texspt-pink no-underline" href="#">Terms of Use</a>, <a class="text-pink no-underline" href="#">Privacy Policy</a> and consent to us storing your name and email address as highlighted in our <a class="text-pink no-underline" href="#">GDPR compliance</a>.</span>
</label>
<label for="receiveUpdates" class="cursor-pointer select-none flex items-start mt-2 mb-8 text-xs leading-none">
<input v-model="user.receiveUpdates" type="checkbox" name="receiveUpdates" id="receiveUpdates" class="mr-3 inline-block">
<span class="flex-auto leading-normal -mt-1">We would like to send you emails with tips to help you get started and details on new features.</span>
</label>
<button type="submit" class="bg-pink hover:bg-pink-dark flex-none text-white px-4 py-6 rounded text-lg font-MuseoSans-medium" name="button">Sign up</button>
</form>
</div>
`
};
This renders fine and works as a form, however I have been trying to add an error section to the top. When ever I add any HTML to the top of this template code (i.e. between the <div> and the <form>) it breaks the whole thing and it doesn't render.
This is because you have an end label tag which has no start tag.
<div>
<form class="flex flex-col mt-2" #submit.prevent="handleSubmit()">
<label class="text-xs block mt-6 mb-3" for="firstName">First Name</label>
<input v-model="user.firstName" required type="text" class="[...]" name="firstName" id="firstName" value="">
<label class="text-xs block mt-6 mb-3" for="firstName">Last Name</label>
<input v-model="user.lastName" required type="text" class="[...]" name="lastName" id="lastName" value="">
<label class="text-xs block mt-6 mb-3" for="emailAdress">Email Adress</label>
<input v-model="user.email"required type="text" class="[...]" name="emailAdress" id="emailAdress" value="">
<label class="text-xs block mt-6 mb-3" for="password">Password</label>
<input v-model="user.password" placeholder="[...]" required type="password" class="[...]" name="password" id="password" value="">
<input v-model="user.receiveUpdates" type="checkbox" name="receiveUpdates" id="receiveUpdates" class="mr-3 inline-block">
<span class="flex-auto leading-normal -mt-1">[...]</span>
</label <!-- Just here -->
<button type="submit" class="[...]" name="button">Sign up</button>
</form>
</div>
I have a form for adding new users and I am having problems with the form reset because it does not remove the valid class of materialize.
The form:
<div class="col s12 m12 l4 xl4">
<form (ngSubmit)="onSubmit(); newLabMember.reset()" #newLabMember="ngForm" ngNativeValidate>
<!-- New lab member form -->
<div class="section">
<h5>Add lab member</h5>
<div class="input-field">
<input type="text" name="firstName" [(ngModel)]="user.firstname" class="validate" id="firstName" validate required>
<label for="firstName">First name</label>
</div>
<div class="input-field">
<input type="text" name="lastName" [(ngModel)]="user.lastname" class="validate" id="lastName" validate required>
<label for="firstName">Last name</label>
</div>
<div class="input-field">
<input type="text" name="email" [(ngModel)]="user.email" class="validate" id="email" validate required>
<label for="email">Member email</label>
</div>
<blockquote>An email will be sent to the new user with a password and further instructions.
</blockquote>
<div class="input-field">
<button type="submit" class="waves-effect waves-light btn blue-grey darken-1">Add new member</button>
</div>
</div>
</form>
</div>
As you can see, when I submit the form I use reset() form but the class .valid from materialize still there.